jQuery Validation utilizando la clase en lugar del valor de nombre

Me gustaría validar un formulario utilizando el complemento jquery validate, pero no puedo usar el valor 'name' dentro del html, ya que este es un campo que también se usa por la aplicación de servidor. Específicamente, necesito limitar el número de casillas marcadas de un grupo. (Máximo de 3.) Todos los ejemplos que he visto usan el atributo de nombre de cada elemento. Lo que me gustaría hacer es utilizar la clase en su lugar, y luego declarar una regla para eso.jQuery Validation utilizando la clase en lugar del valor de nombre

html

Esto funciona:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation" value="1" />

Esto no funciona, pero es lo que estoy apuntando para:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" />

javascript:

var validator = $(".formToValidate").validate({  
    rules:{  
    "salutation":{ 
      required:true, 
     }, 
     "checkBox":{ 
      required:true, 
      minlength:3 } 
    } 
});

¿Es posible hacer esto? ¿Hay alguna forma de orientar la clase en lugar del nombre dentro de las opciones de reglas? ¿O tengo que agregar un método personalizado?

Saludos, Matt

Fuente

2010-05-06 Matt

Puede agregar las reglas basadas en ese selector utilizando .rules("add", options), basta con retirar las reglas que queremos clase de su base en las opciones de validar y después de llamar a $(".formToValidate").validate({... });, hacer esto:

$(".checkBox").rules("add", { 
    required:true, 
    minlength:3 
});

Fuente

2010-05-06 11:07:29

Intenté esto pero solo agrega la regla para la primera casilla de verificación con clase checkBox. ¿Hay algo como un enumerador de .each() requerido? – thomaspaulb

Esto funciona sin embargo: http://stackoverflow.com/questions/5748346/jquery-validate-plugin-cant-validate-classes – thomaspaulb

@littlegreen, .each (function() {$ (this) .rules ("add", someOption);}) puede funcionar – Allen

Aquí está mi solución (no requiere jQuery ... sólo JavaScript):

function argsToArray(args) { 
    var r = []; for (var i = 0; i < args.length; i++) 
    r.push(args[i]); 
    return r; 
} 
function bind() { 
    var initArgs = argsToArray(arguments); 
    var fx =  initArgs.shift(); 
    var tObj =  initArgs.shift(); 
    var args =  initArgs; 
    return function() { 
    return fx.apply(tObj, args.concat(argsToArray(arguments))); 
    }; 
} 
var salutation = argsToArray(document.getElementsByClassName('salutation')); 
salutation.forEach(function(checkbox) { 
    checkbox.addEventListener('change', bind(function(checkbox, salutation) { 
    var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length; 
    if (numChecked >= 4) 
     checkbox.checked = false; 
    }, null, checkbox, salutation), false); 
});

poner esto en un bloque de script al final de <body> y el fragmento hará todo lo magia, limitando el número de casillas marcadas en un máximo de tres (o el número que especifique).

Aquí, voy a dar incluso una página de prueba (pegarlo en un archivo y probarlo):

<!DOCTYPE html><html><body> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<input type="checkbox" class="salutation"> 
<script> 
    function argsToArray(args) { 
     var r = []; for (var i = 0; i < args.length; i++) 
     r.push(args[i]); 
     return r; 
    } 
    function bind() { 
     var initArgs = argsToArray(arguments); 
     var fx =  initArgs.shift(); 
     var tObj =  initArgs.shift(); 
     var args =  initArgs; 
     return function() { 
     return fx.apply(tObj, args.concat(argsToArray(arguments))); 
     }; 
    } 
    var salutation = argsToArray(document.getElementsByClassName('salutation')); 
    salutation.forEach(function(checkbox) { 
     checkbox.addEventListener('change', bind(function(checkbox, salutation) { 
     var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length; 
     if (numChecked >= 3) 
      checkbox.checked = false; 
     }, null, checkbox, salutation), false); 
    }); 
</script></body></html>

Fuente

2010-05-06 10:30:23

Hola, eso es genial, gracias por su respuesta Delan, sin embargo, el resto del formulario (que no he mostrado) también usa jQuery, por lo que preferiría que pudiera usar jQuery en este ejemplo, porque todo necesita ser validado al mismo tiempo. – Matt

Aquí está la solución usando jQuery:

$().ready(function() { 
     $(".formToValidate").validate(); 
     $(".checkBox").each(function (item) { 
      $(this).rules("add", { 
       required: true, 
       minlength:3 
      }); 
     }); 
    });

Fuente

2011-08-10 12:46:48

¿Has probado este código? Hace todas las casillas con la clase "checkbox" requerida. –

ha votado a favor de usar cada función donde addClassRules hubiera funcionado perfectamente. –

requerido: function (elem) { return ($ ('input: checkbox.checkBox: checked'). Length == 0); \t \t \t}, Podría mejorarlo. – Jaikrat

Otra forma de hacerlo, es usar addClassRules. Es específico para las clases, mientras que la opción que usa selector y .rules es más una forma genérica.

Antes de llamar

$(form).validate()

uso como esto:

jQuery.validator.addClassRules('myClassName', { 
     required: true /*, 
     other rules */ 
    });

Ref: http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

Yo prefiero esta sintaxis para un caso como este.

Fuente

2012-11-21 13:36:52

+1 para 'addClassRules' ¿Por qué no lo sabía antes? –

Esta es una solución mejor, aunque no sé por qué no puede pasarla a través de la configuración –

Dado que para mí, algunos elementos se crean en la carga de la página, y algunos son añadidos dinámicamente por el usuario; Lo usé para asegurarme de que todo permaneciera SECO.

En el envío, encuentre todo con la clase x, elimine la clase x, agregue la regla x.

$('#form').on('submit', function(e) { 
    $('.alphanumeric_dash').each(function() { 
     var $this = $(this); 
     $this.removeClass('alphanumeric_dash'); 
     $(this).rules('add', { 
      alphanumeric_dash: true 
     }); 
    }); 
});

Fuente

2012-12-20 18:23:31

Si desea añadir método personalizado puede hacerlo

(en este caso, al menos una casilla seleccionada)

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" onclick="test($(this))"/>

en Javascript

var tags = 0; 

$(document).ready(function() { 

    $.validator.addMethod('arrayminimo', function(value) { 
     return tags > 0 
    }, 'Selezionare almeno un Opzione'); 

    $.validator.addClassRules('check_secondario', { 
     arrayminimo: true, 

    }); 

    validaFormRichiesta(); 
}); 

function validaFormRichiesta() { 
    $("#form").validate({ 
     ...... 
    }); 
} 

function test(n) { 
    if (n.prop("checked")) { 
     tags++; 
    } else { 
     tags--; 
    } 
}

Fuente

2013-04-19 08:08:17 Barno

Sé que esta es una vieja pregunta. Pero yo también necesitaba el mismo recientemente, y recibí esta pregunta de stackoverflow + otra respuesta de este blog. La respuesta que estaba en el blog fue más directa ya que se enfoca especialmente para este tipo de validación. Aquí es cómo hacerlo.

$.validator.addClassRules("price", { 
    required: true, 
    minlength: 2 
});

Este método no requiere que tenga el método de validación por encima de esta llamada.

Espero que esto ayude a alguien en el futuro también. Fuente here.

Fuente

2014-08-16 09:32:33

jQuery Validation utilizando la clase en lugar del valor de nombre

Respuesta

Cuestiones relacionadas