Wie kann ich das Formularübermittlungsereignis in Javascript anhören?

Ich möchte meine eigene Javascript-Bibliothek zur Formularvalidierung schreiben und habe bei Google nachgeforscht, wie festgestellt werden kann, ob auf eine Schaltfläche zum Senden geklickt wird. Ich habe jedoch nur Code gefunden, in dem Sie onClick on onSubmit="function()"in HTML verwenden müssen.

Ich möchte dieses Javascript erstellen, damit ich keinen HTML-Code wie das Hinzufügen von onSubmit oder onClick Javascript berühren muss.

Warum verwenden Leute jQuery immer, wenn es nicht notwendig ist?
Warum können Menschen nicht einfach einfaches JavaScript verwenden?

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 ist eine Funktion, die Sie beim Senden des Formulars aufrufen möchten.

Weitere EventTarget.addEventListenerInformationen finden Sie in dieser Dokumentation zu MDN .

submitVerwenden Sie .preventDefault()in Ihrer Rückruffunktion Folgendes, um das native Ereignis abzubrechen (das Senden des Formulars zu verhindern).

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

Das submitEreignis mit Bibliotheken abhören

Wenn Sie aus irgendeinem Grund entschieden haben, dass eine Bibliothek erforderlich ist (Sie verwenden bereits eine oder möchten sich nicht mit browserübergreifenden Problemen befassen), finden Sie hier eine Liste von Möglichkeiten, um das Übermittlungsereignis in allgemeinen Bibliotheken anzuhören:

1. jQuery

   $(ele).submit(callback);

   Wo eleist die Formularelementreferenz und callbackals Rückruffunktionsreferenz. Referenz

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

   Sehr einfach, wo $scopeist der Umfang, den das Framework in Ihrem Controller bietet . Referenz

3. Reagieren

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

   Geben Sie einfach einen Handler an die onSubmitRequisite weiter. Referenz

4. Andere Frameworks / Bibliotheken

   Weitere Informationen finden Sie in der Dokumentation Ihres Frameworks.

Validierung

Sie können Ihre Validierung jederzeit in JavaScript durchführen, aber mit HTML5 haben wir auch eine native Validierung.

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

Sie brauchen nicht einmal JavaScript! Wenn die native Validierung nicht unterstützt wird, können Sie auf einen JavaScript-Validator zurückgreifen.

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

Dies ist die einfachste Möglichkeit, Ihre eigene Javascript-Funktion aufzurufen, wenn eine onSubmitauftritt.

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

Abhängig von Ihren Anforderungen können Sie auch ohne Bibliotheken wie jQuery Folgendes tun:

Fügen Sie dies Ihrem Kopf hinzu:

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

Und Ihre Form könnte immer noch so aussehen:

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

Mit jQuery:

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

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