Как я могу прослушать событие отправки формы в javascript?

Я хочу написать свою собственную библиотеку JavaScript для проверки формы, и я искал в Google, как определить, нажата ли кнопка отправки, но все, что я нашел, это код, где вы должны использовать onClick на onSubmit="function()" в html.

Я хотел бы сделать этот javascript так, чтобы мне не нужно касаться какого-либо HTML-кода, например, добавить onSubmit или onClick javascript.

Ответ 1

Написание обработчиков событий в javascript в vanilla может раздражать работу в браузерах, поэтому я бы рекомендовал использовать библиотеку, например jquery, чтобы сделать его надежным (а также легче писать).

В jquery, если у вас есть такая форма:

<form id="hello-world" action="sayhello">
    <input type="submit" value="Hello!">
</form>

Вы можете присоединить обработчик событий следующим образом:

$('#hello-world').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Validations go here */
    this.submit(); // If all the validations succeeded
});

Ответ 2

Почему люди всегда используют jQuery, когда это не нужно?
Почему люди не могут просто использовать простой JavaScript?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback - это функция, которую вы хотите вызвать при отправке формы.

О EventTarget.addEventListener, проверьте эту документацию в MDN.

Чтобы отменить встроенное событие submit (запретить отправку формы), используйте .preventDefault() в своей функции обратного вызова,

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

Прослушивание события `submit` с библиотеками

Если по какой-то причине вы решили, что библиотека необходима (вы уже используете ее или вы не хотите заниматься проблемами с несколькими браузерами), здесь приведен список способов прослушивания события отправки в общие библиотеки:

JQuery

$(ele).submit(callback);

Где ele - ссылка элемента формы, а callback - ссылка функции обратного вызова.

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

Ответ 3

В соответствии с вашими требованиями вы также можете сделать следующее без библиотек, таких как jQuery:

Добавьте это в голову:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

И ваша форма может выглядеть примерно так:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

Ответ 4

Это самый простой способ, с помощью которого вы можете вызвать свою собственную функцию javascript при возникновении onSubmit.

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

Ответ 5

С помощью jQuery:

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});