Validación de entradas de matriz mediante el complemento de validación de jquery

Question

Tengo el siguiente formulario. Estoy tratando de validar las entradas usando el complemento de validación jquery. He intentado algunos códigos pero no está funcionando. Cuando hago clic en el botón de enviar solo va a la acción del formulario.

<form name="voucherform" action="something" method="post"> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="submit" name="submit" value="submit" /> 

¿Me puede mostrar cómo validar el formulario de arriba usando el plugin de validación de jQuery?

Gracias :)

mi código Jquery:

<script type="text/javascript" src="<?php echo base_url();?>support/datepicker/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url();?>support/js/jquery.validate.js"></script> 

<script> 
    $(document).ready(function() { 

// validate signup form on keyup and submit 
var validator = $("#voucherform").validate({ 
    showErrors: function(errorMap, errorList) { 
     $(".errormsg").html($.map(errorList, function (el) { 
      return el.message; 
     }).join(", ")); 
    }, 
    wrapper: "span", 
    rules: { 

     reg_number[]: { 
      required: true, 
      minlength: 2, 
      remote: { 
       url: '<?php echo base_url();?>sales/invoice_check', async: false, 
       type: 'post' 
      }, 

     } 
    }, 
    messages: { 

     reg_number[]: { 
      required: "Enter Reg Number", 
      minlength: jQuery.format("Enter at least {0} characters"), 
      remote: jQuery.format("{0} is already in use") 
     }, 
    } 
    }); 
    }); 
    </script> 

Answer 1

Se tienen dos problemas:

1. No se selecciona el elemento form correctamente.

   Está buscando form con id "voucherform" y su marcado no contiene uno. Es posible que desee cambiar su selector para:

   $("form[name='voucherform']").validate({ ... }); 
   

2. soportes ([]) no son válidos en los identificadores de JavaScript. Esto significa que su script no está siendo analizado correctamente. Para resolver esto, simplemente ajuste los campos que tienen corchetes entre comillas, es decir, 'reg_number[]' en lugar de reg_number[].

Ajustado código de validación:

var validator = $("form[name='voucherform']").validate({ 
    showErrors: function(errorMap, errorList) { 
     $(".errormsg").html($.map(errorList, function(el) { 
      return el.message; 
     }).join(", ")); 
    }, 
    wrapper: "span", 
    rules: { 
     'reg_number[]': { 
      required: true, 
      minlength: 2, 
      remote: { 
       url: '<?php echo base_url();?>sales/invoice_check', 
       async: false, 
       type: 'post' 
      } 

     } 
    }, 
    messages: { 
     'reg_number[]': { 
      required: "Enter Reg Number", 
      minlength: jQuery.format("Enter at least {0} characters"), 
      remote: jQuery.format("{0} is already in use") 
     } 
    } 
}); 

Ejemplo:http://jsfiddle.net/hfrhs/

Answer 2

aquí es mi manera

'reg_number[]':{ 
    required:function(){ 
     return $("input[name='reg_number[]']").filter(function(){ 
     return $.trim($(this).val()).length>0 
     }).length==0 
    } 
} 

Esperamos que tiene poco de ayuda para usted.

Answer 3

He encontrado la mejor respuesta aquí https://stackoverflow.com/a/17643385/146553

si sus nombres de los elementos tienen índices son tratados como nombres únicos req_number [0] req_number [1] ect ....

Answer 4

Puede encuentra una buena respuesta aquí: jquery-validation-for-array-of-input-elements. En jquery.validate.js, podemos encontrar una función llamada checkForm, tenemos que modificarlo de la siguiente manera:

checkForm: function() { 
    this.prepareForm(); 
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
    if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) { 
    for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) { 
     this.check(this.findByName(elements[i].name)[cnt]); 
    } 
    } else { 
    this.check(elements[i]); 
    } 
    } 
    return this.valid(); 
} 

Answer 5

sólo compartir un método para validar casilla con el índice y sólo uno de ellos es obligatorio.

<input type="checkbox" value="0" name="is_appraisal[0]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f"> 

<input type="checkbox" value="1" name="is_appraisal[1]" checked="checked" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s"> 

Jquery Validación para esto:

 $.validator.addMethod("onechecked", function (value, elem, param) { 
      if ($(".siblingcheckbox:checkbox:checked").length > 0) { 
       return true; 
      } else { 
       return false; 
      } 
     }, "You must select at least one!"); 

     $.validator.addClassRules("siblingcheckbox", { 
      onechecked: true 
     });