it-swarm.com.de

Wie kann ich mir das Formular Submit Event in Javascript anhören?

Ich möchte meine eigene JavaScript-Bibliothek für die Formularvalidierung schreiben und habe auf Google nachgefragt, ob auf eine Senden-Schaltfläche geklickt wird. Ich habe jedoch nur Code gefunden, in dem Sie onClick auf onSubmit="function()" in html verwenden müssen.

Ich möchte dieses Javascript so einstellen, dass ich keinen HTML-Code wie das Hinzufügen von onSubmit- oder onClick-Javascript anfassen muss.

109
ed1t

Siehe Dereks Antwort , das sollte nun die akzeptierte Antwort sein. Es enthält alles, was diese Antwort enthielt, und noch mehr.

(Ich habe versucht, diese Antwort zu löschen, nachdem Derek seine mit Bibliotheksbeispielen aktualisiert hat, aber mit dem grünen Häkchen SO lässt mich nicht)

16
Ben Lee

Warum verwenden Leute immer jQuery, wenn es nicht notwendig ist?
Warum können Menschen nicht einfach nur 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 aufrufen möchten, wenn das Formular gesendet wird.

Informationen zu EventTarget.addEventListener Finden Sie unter diese Dokumentation zu MDN .

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

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

Abhören des Ereignisses submit mit Bibliotheken

Wenn Sie aus irgendeinem Grund entschieden haben, dass eine Bibliothek erforderlich ist (Sie verwenden bereits eine oder möchten keine browserübergreifenden Probleme lösen), finden Sie hier eine Liste der Möglichkeiten, wie Sie das Submit-Ereignis in allgemeinen Bibliotheken abhören können:

  1. jQuery

    $(ele).submit(callback);
    

    Dabei ist ele die Referenz für das Formularelement und callback die Referenz für die Rückruffunktion. Referenz

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

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

    Sehr einfach, wobei $scope Der Bereich ist, der vom Framework in Ihrem Controller bereitgestellt wird. Referenz

  2. React

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

    Übergeben Sie einfach einen Handler an die Stütze onSubmit. Referenz

  3. Andere Frameworks/Bibliotheken

    Lesen Sie die Dokumentation Ihres Frameworks.


Validierung

Sie können Ihre Validierung immer 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/

460

Dies ist die einfachste Methode, mit der Sie Ihre eigene Javascript-Funktion aufrufen können, wenn ein onSubmit auftritt.

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

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 Ihr Formular könnte immer noch so aussehen:

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