I am using JQuery validation plugin. I want to specify maxlength for one of the fields.It can be specified as below.

rules: {
   Message: {
      required: false,
      maxLength: 200
   }
}

But instead of defining the rules externally, i want to specify the rules inside html input code

Similar to :

<input type="text" name="AssistanPhone" value="" class="required"  />

In above example "required" is specified through class. Similarly how can i specifiy maxlength which can be recognized by jquery plugin and gives error message if length exceeds?

Thanks!

I am using JQuery validation plugin. I want to specify maxlength for one of the fields.It can be specified as below.

rules: {
   Message: {
      required: false,
      maxLength: 200
   }
}

But instead of defining the rules externally, i want to specify the rules inside html input code

Similar to :

<input type="text" name="AssistanPhone" value="" class="required"  />

In above example "required" is specified through class. Similarly how can i specifiy maxlength which can be recognized by jquery plugin and gives error message if length exceeds?

Thanks!

• javascript
• jquery
• html
• jquery-validate

• What does this have to do with Java? – nanofarad Commented Aug 22, 2013 at 7:10

4 Answers 4

Not capital L its l

Ex:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      maxlength: 200
    }
  }
});

PLUGIN DEMO

As far as I can see you cannot specify the messages via attributes, but the maxlength can be specified as a attribute

<input type="text" name="AssistanPhone" value="" required maxlength="3"  />

Demo: Fiddle

I updated the javascript code of the validator myself (so I'm stuck with my version 1.8.1 now instead of upgrading), but here's what I did (around line 767):

classRules: function(element) {
    var rules = {};
    var classes = $(element).attr('class');
    classes && $.each(classes.split(' '), function() {
        if (this in $.validator.classRuleSettings) {
            $.extend(rules, $.validator.classRuleSettings[this]);
        }
        if (this.toLowerCase().lastIndexOf('maxlength-', 0) === 0) { // starts with
            var x = parseInt(this.substring(10)); // take number after 'maxlength-'
            $.extend(rules, {maxlength: x});
        }
    });
    return rules;
},

I added the extra if-test for "maxlength-", so now I can add a class like "maxlength-10" to limit to 10. Of course I could also add minlength and so on.

  $("#FormID").validate({
        rules: {
            PriorityDDL: {
                required: true
            },
            Title: {
                required: true
            },
            Text: {
                required: true,
                maxlength: 300
            },

            date: {
                required: true
            },
            reportfile: {
                required: true
            }
        },
        messages: {
            PriorityDDL: {
                required: "Please select priority"
            },
            Title: {
                required: "Please enter title"
            },
            Text: {
                required: "Please enter message",
                maxlength:"maxLength is 300 characters"
            },
            date: {
                required: "Please select date"
            },
            reportfile: {
                required: "Please select file"
            }
        }
    });