validation de formulaire HTML - vérifier « nécessaire » attribut avant de poursuivre


1

J'ai un formulaire HTML avec des champs de texte requis, quelque chose comme ça -

<form> 
    <input type="text" class="text_input" required> 
    <input type="text" class="text_input" required> 
    <div id="submit_div"> 
     <input type="submit id="submit"> 
    </div> 
</form> 

Afin d'éviter les soumissions de répétition accidentelle (par exemple lorsque quelqu'un clique soumettre deux fois , que ce soit par hasard notre impatience), j'ai ajouté le script suivant qui cache le bouton d'envoi d'origine et le remplace par un élément qui est fondamentalement identique en apparence, mais est non fonctionnel

$("#submit")click(function() { 
    $("#submit").hide(); 
    $("#submit_div").append('<div id="submitting" class="buttonText animated flash">Submitting...</br><div class="againStop" id="stop">Please wait</div></div>'); 
}); 

le problème que je supplantation est-ce que cliquer sur le bouton Envoyer avant que le champ requis ne soit rempli déclenche ce script, en supprimant le bouton de la page et en empêchant l'utilisateur de soumettre le formulaire après avoir rempli le champ requis. Ce dont j'ai besoin est quelque chose qui indique à la fonction hide et append de ma fonction de se déclencher uniquement si tous les champs obligatoires ont été remplis. Comment puis-je accéder à la propriété requise de tous les champs obligatoires et vérifier qu'ils retournent vrai avant de continuer afin que les méthodes ne déclenchent que si tous les champs obligatoires sont remplis?

1

Ajoutez un écouteur d'événement à l'événement onsubmit pour votre formulaire et ajoutez return: false si les vérifications échouent.

+1

Cool, merci. J'étais tellement coincé sur l'utilisation du gestionnaire d'événement 'click', j'ai complètement oublié le gestionnaire' submit'. 23 févr.. 162016-02-23 19:33:48


0

Validez vos champs de formulaire en utilisant JavaScript avant que le formulaire ne soit soumis et alertez l'utilisateur s'il existe un champ vide ou des informations incorrectes. Trouver un tutoriel sur la validation de formulaire en utilisant javascript ici, http://www.web-tutor99.com/complete-form-validation-using-javascript.html