Jak mogę odsłuchać zdarzenia przesłania formularza w javascript?

Chcę napisać własną bibliotekę javascript do walidacji formularzy i szukałem w Google, jak wykryć, czy został kliknięty przycisk przesyłania, ale wszystko, co znalazłem, to kod, w którym musisz użyć onClick onSubmit="function()"w html.

Chciałbym zrobić ten skrypt javascript, aby nie musieć dotykać żadnego kodu HTML, takiego jak dodawanie javascript onSubmit lub onClick.

Dlaczego ludzie zawsze używają jQuery, kiedy nie jest to konieczne?
Dlaczego ludzie nie mogą po prostu używać prostego 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 to funkcja, którą chcesz wywołać podczas przesyłania formularza.

Informacje EventTarget.addEventListener, zapoznaj się z dokumentacją na MDN .

Aby anulować submitzdarzenie natywne (zapobiec przesłaniu formularza), użyj .preventDefault()w funkcji wywołania zwrotnego,

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

Wysłuchanie submitwydarzenia z bibliotekami

Jeśli z jakiegoś powodu zdecydowałeś, że biblioteka jest konieczna (już z niej korzystasz lub nie chcesz zajmować się problemami z różnymi przeglądarkami), oto lista sposobów odsłuchiwania zdarzenia przesyłania we wspólnych bibliotekach:

1. jQuery

   $(ele).submit(callback);

   Gdzie elejest odwołaniem do elementu formularza i callbackjest odwołaniem do funkcji zwrotnej. Odniesienie

    <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(){ /*...*/ };

   Bardzo proste, gdzie $scopejest zakres zapewniany przez strukturę wewnątrz twojego kontrolera . Odniesienie

3. Reagować

   <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
   }

   Po prostu podaj obsługę do onSubmitrekwizytu. Odniesienie

4. Inne frameworki / biblioteki

   Zapoznaj się z dokumentacją swojego frameworka.

Uprawomocnienie

Zawsze możesz przeprowadzić walidację w JavaScript, ale w HTML5 mamy również natywną walidację.

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

Nie potrzebujesz nawet JavaScript! Jeśli natywna walidacja nie jest obsługiwana, możesz wrócić do walidatora JavaScript.

Demo: http://jsfiddle.net/DerekL/L23wmo1L/

To najprostszy sposób, w jaki można wywołać własną funkcję javascript, gdy onSubmitwystąpi błąd.

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();
}

W zależności od wymagań możesz również wykonać następujące czynności bez bibliotek, takich jak jQuery:

Dodaj to do swojej głowy:

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;
        }
    }
}

Twój formularz może nadal wyglądać następująco:

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

Dzięki jQuery:

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

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