Activation du bouton désactivé après validation réussie de jQuery

J’ai le code suivant où j’ai 2 champs de saisie d’email dont j’ai besoin pour valider ce sont les mêmes qui fonctionnent avec succès avec jQuery validate equalTo

 Email Address   
 Confirm Email Address

Une fois la validation réussie, je souhaite activer le bouton, mais je n’arrive pas à comprendre comment faire cela.

  $('#ccSelectForm').validate({ rules: { inputEmail: { required: true, email: true }, inputEmailConfirm: { required: true, email: true, equalTo: '#inputEmail' }, } });

Idéalement, en bonus, j’aimerais configurer les contrôles de formulaire pour qu’ils utilisent les états de validation dans Bootstrap3, détaillés ici – http://getbootstrap.com/css/#forms-control-validation

Fiddle is here http://jsfiddle.net/4wU5m/

Il n’y a pas d’option / fonction de rappel jQuery Validate du plug-in qui se déclenche lorsque tous les champs sont valides sans d’abord cliquer sur le bouton d’envoi.

Vous devez créer un gestionnaire d’événements keyup blur externe qui vérifie la validité de votre formulaire et active / désactive le bouton en conséquence. chaque fois que vous appuyez sur une touche ou que vous quittez un champ.

DEMO: http://jsfiddle.net/p628Y/1/

 $(document).ready(function () { $('#ccSelectForm').validate({ rules: { inputEmail: { required: true, email: true }, inputEmailConfirm: { // required: true, // <-- redundant // email: true, // <-- redundant equalTo: '#inputEmail' } // <-- removed trailing comma } }); $('#ccSelectForm input').on('keyup blur', function () { // fires on every keyup & blur if ($('#ccSelectForm').valid()) { // checks form for validity $('button.btn').prop('disabled', false); // enables button } else { $('button.btn').prop('disabled', 'disabled'); // disables button } }); });

Comme le plug-in jQuery Validate désactive de manière dynamic la validation HTML5 du navigateur, j'ai supprimé l'atsortingbut required de votre balisage et modifié le type="email" en type="text" . ( Vous avez déjà ces règles de validation spécifiées dans le plugin .)

De plus, vous n'avez pas besoin de spécifier deux fois toutes les règles lorsque vous utilisez la règle equalTo car le deuxième champ doit déjà correspondre au premier.

MODIFIER:

Dans le scénario ci-dessus, votre page dépend totalement de JavaScript. En d'autres termes, sans JavaScript, le bouton est toujours désactivé.

Si la validation côté serveur est en place et que vous souhaitez que votre page soit indépendante de JavaScript, vous devez supprimer le disabled="disabled" de votre balise de bouton et l'append à votre code JavaScript, juste à l'intérieur du gestionnaire d'événements prêt pour le DOM.

 $('button.btn').prop('disabled', 'disabled');

Dans ce scénario, sans JavaScript, vous aurez toujours un bouton fonctionnel. Avec JavaScript, le bouton est désactivé par programme lors du chargement de la page.

Une solution plus élégante et rapide consiste simplement à remplacer les événements par défaut sur le clic et sur l’accu au clavier en ajoutant le code dont vous avez besoin comme suit au lieu d’append un autre événement d’écoute.

 $("#form").validate({ submitHandler: function(form) { form.submit(); }, onkeyup: function( element, event ) { if ( event.which === 9 && this.elementValue(element) === "" ) { return; } else if ( element.name in this.submitted || element === this.lastElement ) { this.element(element); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } }, onclick: function( element ) { // click on selects, radiobuttons and checkboxes if ( element.name in this.submitted ) { this.element(element); // or option elements, check parent select in that case } else if ( element.parentNode.name in this.submitted ) { this.element(element.parentNode); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } } })

Avec le code CSS suivant pour le déclencheur d’envoi – initialement désactivé (classes d’amorçage 3):

 button_save

Ceci est très facile à utiliser avec le plug-in jquery

 if (this.valid() && $('#form').hasClass('dirty')) { // checks form for validity

initialisation du plug-in à l’aide de silent:

 $('#form').areYouSure( {'silent':true} );