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

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: '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/