Comment puis-je écouter de la soumettre le formulaire d'événements en javascript?

Je veux écrire mon propre formulaire de validation de la bibliothèque javascript et j'ai été chercher sur google comment détecter si un bouton est cliqué, mais tout ce que je trouve est le code où vous devez utiliser onClick sur onSubmit="function()" en html.

Je voudrais faire ce javascript, de sorte que je n'ai pas toucher à n'importe quel code html comme l'ajout de onSubmit ou onClick javascript.

Pourquoi ne pas document.forms['yourForm'].onsubmit = function(){}? Ou addEventListener?
Avez-vous vraiment envie de vérifier si le bouton "soumettre" a été cliqué, ou voulez-vous vérifier lorsque l'utilisateur soumet le formulaire (qui ils peuvent le faire en cliquant sur le bouton ou en appuyant sur Entrée à partir de l'un des champs)?

InformationsquelleAutor ed1t | 2011-09-14

14

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

(J'ai essayé de supprimer cette réponse, après Derek mis à jour sa pour inclure la bibliothèque des exemples, mais avec la coche verte, ALORS ne me laisse pas)
- L'écriture d'un cross-browser fonction pour ajouter des écouteurs d'événement est à moins de 10 lignes de code. Vous n'avez pas vraiment besoin d'une 4,000 ligne de la bibliothèque. Il est également inutile tout d'abord annuler l'événement submit, puis l'appeler manuallly. Il suffit de ne pas l'annuler en premier lieu.
- Concernant l'annulation de la soumettre, je pense que RobG du point, je suis d'accord avec, est de ne pas commencer par la prévention par défaut: au lieu d'avoir un cas de test pour annuler uniquement lorsque la validation échoue (et sinon ne rien faire pour qu'il continue à soumettre automatiquement). Il y a d'autres utilisations pour onsubmit gestionnaires d'où vous ne l'auriez pas annuler (par exemple, si vous avez juste besoin de définir la valeur d'un champ caché ou quelque chose).
- Soyez averti, appelant $(this).submit() à l'intérieur d'une soumettez-auditeur prendra fin dans une boucle sans fin.
- Cela ne fonctionne pas. "submit n'est pas une fonction".
- le titre dit javascript, pas jQuery.....
- Downvoted. L'utilisateur a demandé "JavaScript" non "jQuery".
- Ne devrait pas être jQuery
- Remarque. "javascript?".
- Comment peut-il être fait en général pour tous les formulaires ou tout simplement de l'événement submit? Alors peut-être trouver l'id de la forme qui a appelé à la soumettre. De toute façon?
InformationsquelleAutor Ben Lee
455

Pourquoi dit-on toujours utiliser jQuery quand il n'est pas nécessaire?

Pourquoi on ne peut pas les gens utilisent 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 voulez l'appeler lorsque le formulaire est soumis.

Sur EventTarget.addEventListener, découvrez cette documentation sur MDN.

Pour annuler le natif submit événement (éviter le formulaire de soumission), l'utilisation .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 quelque raison que vous avez décidé d'une bibliothèque est nécessaire (vous utilisez déjà un ou vous ne voulez pas avoir affaire avec des problèmes de navigateur), voici une liste de façons d'écouter l'événement submit en commun des bibliothèques:
1. jQuery
```
$(ele).submit(callback);
```
  Où ele est la forme de l'élément de référence, et callback étant la fonction de rappel de référence. Référence
HTML:
```
    <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 le cadre prévu par le cadre à l'intérieur de votre contrôleur. Référence
2. 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
}
```
  Il suffit de passer un gestionnaire à l' onSubmit prop. Référence
3. D'autres frameworks/librairies
  
  Reportez-vous à la documentation de votre cadre.
Validation

Vous pouvez toujours faire de votre validation en JavaScript, mais avec HTML5 nous avons également natif de validation.
```

<input type="number" required pattern="\d{5}">
```
Vous n'avez même pas besoin de JavaScript! Chaque fois que natif de validation n'est pas pris en charge, vous pouvez repli à un programme de validation JavaScript.

Démo: http://jsfiddle.net/DerekL/L23wmo1L/
- Que 5 lignes de "horrible...horrible" code remplace les fonctionnalités fournies par 4.000 lignes de jQuery, qui doit également être "horrible...horrible" code de trop.
- Je n'ai pas beaucoup contre jQuery, seuls ceux qui l'utilisent comme une sorte d'incantation magique sans se rendre compte qu'ils peuvent remplacer la totalité de la chose avec quelques lignes de code. Pourquoi ne pas prendre le temps de savoir comment les navigateurs fonctionnent réellement? Ce n'est pas vraiment dur.
- et juste parce que vous pouvez faire quelque chose avec une bibliothèque ne signifie pas que vous devriez soit, ni aux autres d'être dissuadés d'apprendre les bases, par les réponses de "il suffit d'utiliser la bibliothèque de l'x". Quand quelqu'un pose une question précise à propos de javascript, il est poli de répondre à la question en utilisant un javascript. Par tous les moyens de proposer quelque chose à partir de votre bibliothèque de choix, mais de répondre à la question devrait être la première priorité.
- Personnellement, je crois qu'une personne doit d'abord connaît les bases.
- ...parce que les gens veulent croire en la magie.
- dans le même esprit, nous avons vraiment devrait essayer d'écrire plus de langage d'assemblage. Demi-blague (je préfère un jquery solution et pense que c'est une interminable trou de lapin si vous vraiment vous voulez comprendre ce qui se passe sous le capot), mais oui, je suis content de ce que je sais, certains assemblée de la langue, et de savoir comment les connexions TCP sont faites, etc. Je n'est pas de la main de quelqu'un d'un niveau inférieur à la solution juste pour le plaisir de leur enseigner les merveilles de whats-sous-le-capot.
- Si vous avez besoin et ont déjà jQuery dans votre projet de toute façon, pourquoi ne pas l'utiliser? sinon, utiliser JS
- vieille discussion, il me semble (et ce commentaire est de '16) mais: la performance. Voici un simple jsPerf test juste pour les sélecteurs. À l'aide de jQuery est 80% plus lent: jsperf.com/hc-selector-speed
- +1 pour l'inclusion de la bibliothèque des exemples. 7 ans plus tard, je pense toujours que la bibliothèque est une meilleure réponse générale, mais étant donné que votre poste inclut désormais la bibliothèque d'exemples et de vanille javascript, je pense que cela devrait être la accepté de répondre maintenant. J'ai essayé de supprimer le mien, mais avec la coche verte, ALORS ne me laisse pas. Donc à la place j'ai édité pour rendre ma réponse est un indicateur de cela.
- Vraiment beaucoup de choses ont changé dans ces 7 années. Nous sommes beaucoup plus complète à l'échelle des applications web maintenant, et, utilisant les cadres sont plus fréquentes que jamais. Avec cela à l'esprit, le natif .addEventListener encore a certains avantages, mais seulement dans les petites pages où nous n'aurions pas besoin d'un énorme cadre de la bibliothèque - par exemple, on ne devrait pas inclure la totalité de la bibliothèque jQuery pour utiliser .submit.
InformationsquelleAutor Derek 朕會功夫

C'est la façon la plus simple que vous pouvez avoir votre propre fonction javascript être appelée 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();
}

Pourquoi avez-vous décidé de lier le "soumis" fonction? Il n'y a pas de " ce " dans la fonction.

InformationsquelleAutor Derek Dawson

Selon vos besoins, vous pouvez également effectuer les opérations suivantes sans les bibliothèques comme jQuery:

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

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

toujours utiliser addEventListener au lieu de onsubmit ou onload pour permettre à d'autres développeurs d'ajouter leurs propres auditeurs.

InformationsquelleAutor HEDWIN

-1

Avec jQuery:

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

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

InformationsquelleAutor Justin808

Vous devez vous connecter pour publier un commentaire.

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

Validation

L'écoute de la `submit` événement avec des bibliothèques