web-dev-qa-db-fra.com

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

J'ai le code suivant où j'ai 2 champs de saisie d'e-mail dont j'ai besoin pour valider ce sont les mêmes qui fonctionnent avec succès en utilisant jQuery validate equalTo.

<div class="control-group">
 <label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
   <div class="controls">
    <input type="email" name="inputEmail" placeholder="[email protected]" id="inputEmail" required>
   </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
     <div class="controls">
    <input type="email" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" required>
    </div>
    </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo; </button>

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

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

Idéalement, en bonus, j'aimerais définir les contrôles de formulaire pour utiliser les états de validation dans Bootstrap3, détaillés ici - http://getbootstrap.com/css/#forms-control-validation

Le violon est ici http://jsfiddle.net/4wU5m/

jqueryjquery-validatetwitter-bootstrap-3
10
LJT

Il n'y a pas d'option/fonction de rappel du plugin jQuery Validate qui se déclenche lorsque tous les champs sont valides sans d'abord cliquer sur le bouton Soumettre.

Vous devrez 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 qu'une touche est enfoncée 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 plugin jQuery Validate désactive dynamiquement la validation HTML5 du navigateur, j'ai supprimé l'attribut required de votre balisage et changé type="email" En type="text". ( Vous avez déjà ces règles de validation spécifiées dans le plugin.)

<input type="text" name="inputEmail" placeholder="[email protected]" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" />

Vous n'avez pas non plus besoin de spécifier toutes les règles deux fois lorsque vous utilisez la règle equalTo car le deuxième champ doit déjà toujours 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 vous avez une validation côté serveur en place et que vous souhaitez que votre page soit indépendante de JavaScript, vous devrez supprimer le disabled="disabled" De votre balisage de bouton et l'ajouter à votre JavaScript juste à l'intérieur du gestionnaire d'événements prêt pour DOM.

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

Dans ce scénario, sans JavaScript, vous aurez toujours un bouton de travail, et avec JavaScript, le bouton est désactivé par programme au chargement de la page.

28
Sparky

Une solution plus élégante et rapide consiste à simplement remplacer les événements par défaut au clic et à la touche en ajoutant le code dont vous avez besoin comme suit au lieu d'ajouter 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 de soumission - initialement désactivé (classes bootstrap 3):

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

Cela peut très facilement être utilisé avec le plug-in jquery areYouSure pour activer la soumission uniquement lorsque des modifications réelles sont apportées:

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

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

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