Comment puis-je écouter l'événement de soumission du formulaire en javascript ?

Question

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

Je voudrais faire ce javascript pour ne pas avoir à toucher au code html comme ajouter le javascript onSubmit ou onClick.

Answer 1

Pourquoi les gens utilisent-ils toujours jQuery alors que ce n'est pas nécessaire ?
Pourquoi les gens ne peuvent-ils pas utiliser un simple JavaScript ?

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 voulez appeler lorsque le formulaire est soumis.

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

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

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

---

À l'écoute de la submit événement avec des bibliothèques

Si, pour une raison ou une autre, vous avez décidé qu'une bibliothèque est nécessaire (vous en utilisez déjà une ou vous ne voulez pas vous occuper des problèmes liés aux navigateurs croisés), voici une liste des moyens d'écouter l'événement submit dans les bibliothèques courantes :

1. jQuery

   $(ele).submit(callback);

   Où ele est la référence de l'élément de formulaire, et callback étant la 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ù $scope est la portée fournie par le cadre à l'intérieur de votre contrôleur . Référence

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

   Il suffit de passer un gestionnaire à la onSubmit prop. 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 aussi la validation native.

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

Vous n'avez même pas besoin de JavaScript ! Lorsque la validation native n'est pas prise en charge, vous pouvez vous rabattre sur un validateur JavaScript.

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

Answer 2

C'est la façon la plus simple de faire en sorte que votre propre fonction javascript soit appelée lorsqu'une fonction onSubmit se produit.

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

Answer 3

En fonction de vos besoins, vous pouvez également effectuer les opérations suivantes sans recourir à des bibliothèques comme jQuery :

Ajoute ça à ta 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 encore ressembler à quelque chose comme :

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

Answer 4

Si vous avez plusieurs formulaires dans la même page et que vous voulez gérer l'événement submit Listener sans utiliser l'Id

jQuery

$('form').submit(function (event) {
    targetObj = event.target;
    // do your logic
});

---

Une astuce purement JavaScript

Onload fait juste le chemin en dessous.

for(var i=0; i<document.forms.length; i++){
    var form = document.forms[i];
    form.addEventListener("submit", myListener,false);
}

credit :- Gestion de plusieurs récepteurs d'événements de soumission de formulaires en utilisant JavaScript credit goes to Réponse de Jan Pfeifer sur la communauté StackOverflow

J'espère que cela aidera quelqu'un

Answer 5

Avec jQuery :

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

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