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

Question

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

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

Answer 1

Почему люди всегда используют 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 с библиотеками

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

1. JQuery

   $(ele).submit(callback);
   

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

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

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };
   

   Очень просто, где $scope - это объем, предоставляемый платформой внутри вашего контроллера . Ссылка

3. Реагировать

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }
   

   Просто передайте обработчик в onSubmit реквизит. Ссылка

4. Другие фреймворки / библиотеки

   Обратитесь к документации вашей платформы.

---

Проверка

Вы всегда можете выполнить проверку в JavaScript, но в HTML5 у нас также есть встроенная проверка.

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

Вам даже не нужен JavaScript! Всякий раз, когда собственная проверка не поддерживается, вы можете использовать валидатор JavaScript.

Демо: http://jsfiddle.net/DerekL/L23wmo1L/

Answer 2

См. Ответ Дерека , который теперь должен быть принятым ответом. Он включает в себя все, что был включен в этот ответ и многое другое.

(Я пытался удалить этот ответ после того, как Дерек обновил его, добавив примеры библиотек, но с зеленой галочкой SO не разрешит мне)

Answer 3

Это самый простой способ вызвать собственную функцию 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();
}

Answer 4

Исходя из ваших требований, вы также можете делать следующее без библиотек, таких как 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>

Answer 5

С jQuery:

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

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