Validating array inputs using jquery validation plugin

Question

I have the following form. I am trying to validate the inputs using jquery validation plugin. I have tried some codes but its not working. When I click on the submit button

Answer 1

here is my way

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

Hope it has little help for you.

Answer 2

You can find a good answer here: jquery-validation-for-array-of-input-elements. In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:

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 3

Just sharing a method to validate checkbox with index and only one of them is mandatory.

<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 Validation for this :

       $.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
        });

Answer 4

You have two problems:

1. You aren't selecting the form element properly.

   You're looking for a form with id "voucherform" and your markup does not contain one. You probably want to change your selector to:

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

2. Brackets ([]) are not valid in JavaScript identifiers. This means that your script is not being parsed correctly. To resolve this, just wrap those fields that have brackets in them in quotes, i.e. 'reg_number[]' instead of reg_number[].

Tweaked validate code:

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

Example: http://jsfiddle.net/hfrhs/