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

124

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.

ed1t
quelle
8
Warum nicht document.forms['yourForm'].onsubmit = function(){}? Oder addEventListener?
Joseph Silber
3
Möchten Sie wirklich überprüfen, ob auf die Schaltfläche "Senden" geklickt wurde, oder möchten Sie überprüfen, wann der Benutzer das Formular sendet (was er durch Klicken auf die Schaltfläche oder durch Drücken der Eingabetaste in einem der Felder tun kann)?
nnnnnn

Antworten:

505

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

  1. AngularJS (1.x)

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

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

  2. 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

  3. 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/

Derek 朕 會 功夫
quelle
106
Diese 5 Zeilen "grässlicher ... hässlicher" Code ersetzen die erforderliche Funktionalität von 4.000 Zeilen jQuery, die auch "grässlicher ... hässlicher" Code sein müssen.
RobG
45
Ich habe nicht viel gegen jQuery, nur diejenigen, die es als eine Art magische Beschwörung verwenden, ohne zu wissen, dass sie das Ganze durch ein paar Codezeilen ersetzen können. Nehmen Sie sich die Zeit, um herauszufinden, wie Browser tatsächlich funktionieren. Es ist wirklich nicht so schwer.
RobG
4
@Ben - und nur weil Sie etwas mit einer Bibliothek machen können, heißt das nicht, dass Sie dies auch nicht tun sollten, und andere sollten nicht davon abgehalten werden, die Grundlagen durch Antworten von "Verwenden Sie einfach Bibliothek x" zu erlernen. Wenn jemand eine bestimmte Frage zu Javascript stellt, ist es höflich, die Frage mit einfachem Javascript zu beantworten. Schlagen Sie auf jeden Fall etwas aus Ihrer Bibliothek Ihrer Wahl vor, aber die Beantwortung der Frage sollte oberste Priorität haben.
RobG
4
Ich persönlich glaube, dass eine Person zuerst die Grundlagen kennen sollte.
Derek 14 會 功夫
7
Im gleichen Sinne sollten wir wirklich versuchen, mehr Assemblersprache zu schreiben. Halber Scherz (ich bevorzuge eine jquery-Lösung und denke, es ist ein endloses Kaninchenloch, wenn Sie wirklich verstehen wollen, was unter der Haube vor sich geht), aber ja, ich bin froh, dass ich eine Assemblersprache kenne und weiß, wie das TCP funktioniert Verbindungen werden hergestellt usw. Ich würde immer noch niemandem eine Lösung auf niedrigerer Ebene geben, nur um ihnen die Wunder des Was unter der Haube beizubringen.
Josh Sutterfield
6

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();
}
Derek Dawson
quelle
3
Warum haben Sie sich entschieden, die Funktion "Übermittelt" zu binden? Es gibt keine Verwendung von 'this' in der Funktion.
Lior
bindist in der Tat unnötig.
Pstadler
3

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>
Fakedob
quelle
9
Verwenden Sie immer addEventListeneranstelle von onsubmit oder onload, damit andere Entwickler ihre eigenen Listener hinzufügen können.
Beytarovski
1

Mit jQuery:

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

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