Comment écouter l'événement de soumission de formulaire en javascript?

Je veux écrire ma propre bibliothèque javascript de validation de formulaire et j'ai cherché sur google comment détecter si un bouton d'envoi était cliqué, mais tout ce que j'ai trouvé, c'est du code où vous devez utiliser onClick onSubmit="function()"en html.

Je voudrais faire ce javascript pour ne pas avoir à toucher à un code html comme l'ajout de javascript onSubmit ou onClick.

Pourquoi les gens utilisent-ils toujours jQuery quand ce n'est pas nécessaire?
Pourquoi les gens ne peuvent-ils pas simplement utiliser du JavaScript simple?

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 est une fonction que vous souhaitez appeler lorsque le formulaire est soumis.

À propos de EventTarget.addEventListener, consultez cette documentation sur MDN .

Pour annuler l' submitévénement natif (empêcher l'envoi du formulaire), utilisez .preventDefault()dans votre fonction de rappel,

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

Écouter l' submitévénement avec les bibliothèques

Si, pour une raison quelconque, vous avez décidé qu'une bibliothèque est nécessaire (vous en utilisez déjà une ou vous ne voulez pas gérer les problèmes entre navigateurs), voici une liste de façons d'écouter l'événement de soumission dans les bibliothèques courantes:

1. jQuery

   $(ele).submit(callback);

   Où eleest la référence de l'élément de formulaire et callbackla référence de la fonction de rappel. Référence

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

   Très simple, où $scopeest la portée fournie par le cadre à l'intérieur de votre contrôleur . Référence

3. Réagir

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

   Passez simplement un gestionnaire à l' onSubmitaccessoire. Référence

4. Autres frameworks / bibliothèques

   Reportez-vous à la documentation de votre framework.

Validation

Vous pouvez toujours faire votre validation en JavaScript, mais avec HTML5, nous avons également une validation native.

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

Vous n'avez même pas besoin de JavaScript! Chaque fois que la validation native n'est pas prise en charge, vous pouvez utiliser un validateur JavaScript.

Démo: http://jsfiddle.net/DerekL/L23wmo1L/

C'est le moyen le plus simple de faire appel à votre propre fonction javascript lorsqu'un onSubmitfichier.

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

En fonction de vos besoins, vous pouvez également effectuer les opérations suivantes sans bibliothèques telles que jQuery:

Ajoutez ceci à votre tête:

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

Et votre formulaire peut toujours ressembler à quelque chose comme:

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

Avec jQuery:

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

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