Come posso ascoltare l'evento di invio del modulo in javascript?

Voglio scrivere la mia libreria javascript di convalida del modulo e ho cercato su Google come rilevare se si fa clic su un pulsante di invio, ma tutto quello che ho trovato è il codice in cui devi usare onClicca su onSubmit="function()"in html.

Vorrei creare questo javascript in modo da non dover toccare alcun codice html come aggiungere onSubmit o onClick javascript.

Perché le persone usano sempre jQuery quando non è necessario?
Perché le persone non possono semplicemente usare JavaScript semplice?

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 è una funzione che si desidera chiamare al momento dell'invio del modulo.

A proposito EventTarget.addEventListener, consulta questa documentazione su MDN .

Per annullare l' submitevento nativo (impedire l'invio del modulo), utilizzare .preventDefault()nella funzione di richiamata,

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

Ascoltare l' submitevento con le biblioteche

Se per qualche motivo hai deciso che è necessaria una libreria (ne stai già utilizzando una o non vuoi occuparti di problemi tra browser), ecco un elenco di modi per ascoltare l'evento di invio nelle librerie comuni:

1. jQuery

   $(ele).submit(callback);

   Dove si eletrova il riferimento dell'elemento del form ed callbackessendo il riferimento della funzione di callback. Riferimento

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

   Molto semplice, dov'è $scopel'ambito fornito dal framework all'interno del controller . Riferimento

3. Reagire

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

   Passa semplicemente un gestore onSubmitall'elica. Riferimento

4. Altri framework / librerie

   Fare riferimento alla documentazione del proprio framework.

Validazione

Puoi sempre eseguire la convalida in JavaScript, ma con HTML5 abbiamo anche la convalida nativa.

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

Non hai nemmeno bisogno di JavaScript! Ogni volta che la convalida nativa non è supportata, è possibile eseguire il fallback a un validatore JavaScript.

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

Questo è il modo più semplice per richiamare la tua funzione javascript quando si onSubmitverifica.

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

In base alle tue esigenze puoi anche fare quanto segue senza librerie come jQuery:

Aggiungi questo alla tua testa:

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

E il tuo modulo potrebbe ancora assomigliare a:

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

Con jQuery:

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

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