Quel est l'événement pour attraper la soumission de formulaire en Javascript?

Quelques questions ici:

  • Je me demandais quel événement puis-je utiliser pour exécuter un javascript lors de la soumission de formulaire (pour faire une validation)?
  • Une fois que j'ai fait ma validation, comment puis-je envoyer le formulaire sous javascript?

À votre santé…

Disons que vous avez un formulaire nommé myForm :

 var form = document.getElementById('myForm'); 

Pour saisir la soumission:

 try { form.addEventListener("submit", someFunction, false); } catch(e) { form.attachEvent("onsubmit", someFunction); //Internet Explorer 8- } 

Remarque: si vous souhaitez empêcher le formulaire de soumettre, vous someFunction fausses someFunction .

Pour soumettre le formulaire:

 form.submit(); 

Vous pouvez utiliser addEventListener(event, callback) mais Internet Explorer n'a jamais été correctement pris en charge.

IE utilise attachEvent(event, callback) place.

Je recommande vivement d'utiliser une fonction addEvent pré-construite (lots disponibles là-bas) ou une bibliothèque comme jQuery, Prototype, Mootools, etc., car elles ont toutes des fonctions de gestion d'événement excellentes intégrées.

Si vous utilisez jquery, il dispose d'un joli crochet d'événement de soumission de formulaire intégrée qui peut rendre la vie très simple. Consultez ce qui suit:

http://docs.jquery.com/Events/submit

1) Vous recherchez l'événement OnSubmit ?

2) Vous pouvez appeler une fonction comme validate () sur onsubmit event et renvoyer false si la validation échoue. Si false retourne false de la fonction onsubmit.

Peut être comme,

 <form name="test" OnSubmit = "return Submit()"> function Submit() { return Validate() } function Validate() { //Validation code goes here } 

J'ai regardé les commentaires de Serhiy sur le post de Sasha. L'exemple de JsFiddle que Serhiy a fourni était intéressant, et je voulais écrire une réponse qui décrit le comportement que Serhiy a mentionné:

Disons que vous avez un formulaire nommé myForm :

 var form = document.getElementById('myForm'); 

Pour saisir la soumission lors de l'utilisation d'un bouton de soumission (<input type = 'submit'>):

 try { form.addEventListener("submit", validationFunction, false); } catch(e) { form.attachEvent("onsubmit", validationFunction); //Internet Explorer 8- } 

Remarque: Si vous souhaitez empêcher le formulaire de soumettre, vous validationFunction que la validationFunction fausse.

Pour soumettre le formulaire via javascript:

 form.submit(); 

REMARQUE: Si vous utilisez un <input type = "button" onclick = "form.submit ()" />, les gestionnaires d'événements onsubmit ajoutés avec le attachEvent ne seront pas appelés. Par conséquent, vous devez utiliser quelque chose comme:

<Type d'entrée = "bouton" onclick = "si (validationfunction ()) form.submit ();" />

Ou bien si vous avez un bouton:

Vous pouvez ajouter javascript pour joindre à l'événement de clic du bouton. Var btnValidateAndSubmit = document.getElementById ("btnValidateAndSubmit");

 try { btnValidateAndSubmit .addEventListener("click", validationAndSubmitFunction, false); } catch(e) { btnValidateAndSubmit .attachEvent("onclick", validationAndSubmitFunction); //Internet Explorer 8- } 

Enfin, disons que vous travaillez sur un formulaire Web SharePoint pour éditer un élément de liste et que vous souhaitez ajouter une validation personnalisée au formulaire Web. Vous pouvez ajouter le javascript suivant au formulaire Web pour ajouter une validation personnalisée à l'onclick pour les boutons OK.

 var oElements = document.getElementsByTagName("input"); for (var i=0; i< oElements.length; i++) { var elementName = oElements[i].getAttribute("Title"); var elementType = oElements[i].getAttribute("type"); var elementValue = oElements[i].value; if (elementType=="button" && elementValue=="OK") { var okbutton = oElements[i]; // alert("typeof okbutton.onclick = "+typeof okbutton.onclick); if (typeof okbutton.onclick == "function") { var previousfunction = okbutton.onclick; okbutton.onclick = function() { if (validateForm()) { previousfunction(); } }; } else { var aspnetForm = document.getElementById("aspnetForm"); aspnetForm.attachEvent("onsubmit",validateForm); okbutton.onclick = function() { if (validateForm()) { aspnetForm.submit(); } }; } } }