Як я можу слухати подію подання форми у javascript?

Я хочу написати власну бібліотеку JavaScript для перевірки форми, і я шукав у Google, як визначити, чи натиснути кнопку подання, але все, що я знайшов, - це код, у якому вам потрібно використовувати onClick on onSubmit="function()"у HTML.

Я хотів би зробити цей javascript, щоб мені не доводилося торкатися жодного html-коду, наприклад, додавання onSubmit або onClick javascript.

Чому люди завжди використовують 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події з бібліотеками

Якщо з якоїсь причини ви вирішили, що потрібна бібліотека (ви вже користуєтесь нею або не хочете вирішувати проблеми з перехресним браузером), ось список способів прослуховування події надсилання у загальних бібліотеках:

1. jQuery

   $(ele).submit(callback);

   Де eleпосилання на елемент форми і посилання callbackна функцію зворотного виклику. Довідково

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

2. КутовийJS (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/

Це найпростіший спосіб ви можете викликати власну функцію 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();
}

Виходячи зі своїх вимог, ви також можете виконувати такі дії без бібліотек, як 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>

За допомогою jQuery:

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

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