web-dev-qa-db-fra.com

jQuery validate - définir des règles conditionnelles en fonction de la sélection de l'utilisateur

Est-il possible de configurer facilement une règle conditionnelle avec jQuery validate,

Autrement dit, j'essaye d'ajouter une logique qui dit que si la case à cocher 'A' est cochée - alors le champ 'A' doit être rempli, si la case à cocher 'B' est complétée, alors les champs 'B1' et 'B2' doivent être complétés.

par exemple, si une case à cocher avec le nom 'Paypal' est cochée - alors le champ nommé 'Paypal_address' doit être rempli.

Ma logique actuelle est la suivante:

<script type="text/javascript">
$(document).ready(function () {

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        },
        address_1: {
            minlength: 2,
            required: true
        },
        address_2: {
            minlength: 2,
            required: true
        },
        post_code: {
            minlength: 2,
            required: true
        },            
        email: {
            required: true,
            email: true
        },
        terms: {
          required: true,
        }
    },
    errorPlacement: function(error, element) { 
      element.addClass('error');
    },        
    highlight: function (element) {
        $(element).addClass('nonvalid')
          .closest('.form-group').removeClass('error');
    },
    success: function (element) {
        //element.addClass('valid')
          //.closest('.form-group').removeClass('error');
          element.remove('error');
    }
});

MISE À JOUR

En utilisant la méthode ci-dessous de Rohit, j'ai presque réussi à le faire fonctionner parfaitement. Mon formulaire a trois cases à cocher (une seule peut être sélectionnée) 1. Paypal 2. Banque 3. Chèque/Chèque

Si Paypal est coché (par défaut c'est le cas), alors seulement le champ 'Paypal_email_address' est requis, si la banque est cochée alors les champs 'account_number' et 'sort_code' sont requis et enfin si Check est coché le 'check_payable_field' est requis.

// J'ai jusqu'à maintenant $ (".paymentMethod") .on ("click", function () {var payment_method = $ (this) .val ();

  if (payment_method == 'Paypal') {
    Paypal_checked = true;
  } else if (payment_method == 'bank-transfer') {
    bank_checked = true;
    Paypal_checked = false;
  } else if (payment_method == 'cheque') {
    cheque_checked = true;
    Paypal_checked = false;
  }

});

javascriptjqueryjquery-validate
34
Zabs

jQuery Validate prend en charge directement cela, en utilisant expressions de dépendance .

Tout ce que vous devez faire est de modifier vos options de validation comme ceci:

$('#myform').validate({
    rules: {
        fieldA: {
           required:'#checkA:checked'
        }
    }
});

C'est ça!

87
Ryley

Vous pouvez utiliser une méthode de validation personnalisée. Par exemple:

jQuery.validator.addMethod("checkA", function(value, element) {
    return YourValidationCode; // return true if field is ok or should be ignored
}, "Please complete A");

puis utilisez-le dans vos règles:

rules: {
    ....
    field_a: {
        required: false,
        checkA: true
    },
    ....
}

Jetez un coup d'œil: http://jqueryvalidation.org/jQuery.validator.addMethod/

5
Gorsky

Edit: Je n'ai pas bien compris la question au début, je m'en excuse: P Mais, voici une solution qui devrait fonctionner.

Ce que vous pouvez faire est de vérifier si la case est cochée ou non, puis définissez la règle requise pour Paypal_address en tant que telle:

 var checked = false;
 $( "#paypalCheckbox" ).on( "click", function() {
      checked = $('#paypalCheckbox').is(':checked');
  });

Et puis dans les règles vous pouvez ajouter:

 Paypal_address : {
 required: checked
 }
3
Rohit