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 it just goes to form's action.

<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" />

Could you please show me how to validate the above form using jquery validation plugin?

Thanks :)

My Jquery code:

 <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>

I found the best answer here stackoverflow.com/a/17643385/146553 if your element names have indexes they are treated as unique names req_number[0] req_number[1] ect.... — todd
– todd, Commented Sep 23, 2013 at 13:33

Andrew Whitaker · Accepted Answer · 2013-01-16 13:43:08Z

16

You have two problems:

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({ ... });
```
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/

edited Jan 16, 2013 at 13:43

answered Jun 1, 2012 at 2:13

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

black_belt Over a year ago

I am sorry but I thought you solution was working perfectly but I just noticed now that if you put a value in the first input and then click on submit the system doesn't show the the error messages for leaving rest of the inputs blank :(

Andrew Whitaker Over a year ago

@black_belt: Is your remote rule working correctly? If it fails it might cause the rest of the validation to fail.

mlwacosmos Over a year ago

He is right, this solution does not work.. if you never focus the other inputs the validation only works for the first line of elements.

Andrew Whitaker Over a year ago

@mlwacosmos: Do you see the problem in the example?

mlwacosmos Over a year ago

It looks like the plugin cannot work in this case... there is another stackoverflow post... something has to be changed in jquery.validate.js : stackoverflow.com/a/4136430/432513 ans especially this url : codeboss.in/web-funda/2009/05/27/…

|

Alex · Accepted Answer · 2014-11-25 22:05:35Z

5

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

answered Nov 25, 2014 at 22:05

Alex

1,0737 gold badges24 silver badges43 bronze badges

Comments

RanchoX · Accepted Answer · 2015-05-08 17:43:46Z

2

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.

edited May 8, 2015 at 17:43

RanchoX

54 bronze badges

answered Jan 15, 2013 at 13:38

user995789

2791 gold badge4 silver badges15 bronze badges

Comments

Bugfixer · Accepted Answer · 2016-08-10 05:33:37Z

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

Collectives™ on Stack Overflow

Validating array inputs using jquery validation plugin

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related