javascript - fields - jquery validate select

jQuery validate-establece reglas condicionales basadas en la selección del usuario

Question

¿Es posible configurar fácilmente una regla condicional con jQuery validate?

En pocas palabras intento agregar una lógica que diga, si la casilla de verificación ''A'' está marcada, entonces el campo ''A'' debe completarse, si la casilla de verificación ''B'' se completó, los campos ''B1'' y ''B2'' deben completarse.

por ejemplo, si se marca una casilla de verificación con el nombre ''paypal'', entonces debe completarse el campo llamado ''paypal_address''.

Mi lógica existente es la siguiente:

<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'');
    }
});

ACTUALIZAR

Usando el siguiente método de Rohit, casi lo tengo funcionando perfectamente ... Mi formulario tiene tres casillas de verificación (solo se puede seleccionar una) 1. Paypal 2. Banco 3. Verificar / Verificar

Si Paypal está marcada (de manera predeterminada) solo necesita el campo ''paypal_email_address'', si Bank está marcado, entonces se requieren los campos ''account_number'' y ''sort_code'' y, finalmente, si Check está marcado, se requiere ''check_payable_field''.

// Hasta ahora tengo esto $ (".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;
  }

});

Answer 1

Editar: No entendí la pregunta correctamente al principio, me disculpo por eso: P Pero, aquí hay una solución que debería funcionar.

Lo que puede hacer es verificar si la casilla de verificación está marcada o no y luego establecer la regla requerida para paypal_address como tal:

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

Y luego en las reglas puedes agregar:

 paypal_address : {
 required: checked
 }

Answer 2

Puede usar un método de validación personalizado. Por ejemplo:

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

luego úsala en tus reglas:

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

Eche un vistazo: http://jqueryvalidation.org/jQuery.validator.addMethod/

Answer 3

jQuery Validate realmente lo admite directamente, usando expresiones de dependencia .

Todo lo que necesita hacer es cambiar sus opciones de validación como esta:

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

¡Eso es!