web-dev-qa-db-fra.com

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

Je veux écrire ma propre bibliothèque javascript de validation de formulaire et je cherche sur Google comment détecter si un bouton de soumission est cliqué mais tout ce que j'ai trouvé est un code dans lequel vous devez utiliser onClick sur onSubmit="function()" en HTML.

Je voudrais faire ce javascript afin que je n'ai pas à toucher à du code html comme ajouter onSubmit ou onClick javascript.

javascriptformsvalidation
109
ed1t

Voir réponse de Derek , qui devrait maintenant être la réponse acceptée. Il comprend tout ce que cette réponse avait inclus et plus encore.

(J'ai essayé de supprimer cette réponse après que Derek l'ait mis à jour pour inclure des exemples de bibliothèque, mais avec la coche verte, SO ne me laissera pas faire)

16
Ben Lee

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?

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 lors de la soumission du formulaire.

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

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

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

Écoute de l'événement submit 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 liés à plusieurs navigateurs), voici une liste de moyens d'écouter l'événement de soumission dans des bibliothèques communes:

  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>

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

  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
}

    Passez simplement un handler à l’application onSubmit. référence

  3. 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! Lorsque la validation native n'est pas prise en charge, vous pouvez utiliser un validateur JavaScript.

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

460
Derek 朕會功夫

C’est la façon la plus simple d’appeler votre propre fonction javascript lorsqu’un 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();
}
6
Derek Dawson

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 encore ressembler à quelque chose comme:

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