Timmy Von Heiss Timmy Von Heiss - 11 days ago 4x
jQuery Question

How to validate the number of characters in each word?

This is what the input looks like:

<input data-delimiter=", " data-auto-focus="true" placeholder=""
data-autocomplete="/photos/autocomplete_tag_name" data-id-element="#tag_element"
type="text" value="" name="photo[tag_list]" id="photo_tag_list"
class="ui-autocomplete-input error" autocomplete="off" aria-describedby="photo_tag_list-error"

using jquery autocomplete.

As you can see it is tags separated by commas (data-delimiter). The problem is that jquery validation plugin cannot read the input for individual tags, it just looks at the total number of characters. Here is my code:

errorElement: "div",
rules: {
'photo[tag_list]': {required: false, maxlength: 20}

so if the input is over 20 characters it returns an error and completely ignores the data-delimiter. The following returns an error:

beach, hot, picnic, watermelon, swimming, summer,

because it is over twenty characters.


'photo[tag_list]': {required: false, taglength: true}

jQuery.validator.addMethod("taglength", function(value, element, params) {
var taggings = value.split(/[,]/);
for (var i = 0, limit = taggings.length; i < limit; i++) {
value = taggings[i];
if(value.length > 20) {
return false;
else {
return true;
}, "One of your tags is greater than 20 characters.");


The problem is that jquery validation plugin cannot read the input for individual tags, it just looks at the total number of characters.

The maxlength method only looks at the total number of characters in the field. It does not do anything else.

Quoting the docs: "Makes the element require a given maximum length"

If you want to count the characters in each word based on a delimiter, then you'll need to write a custom rule for jQuery Validate.

Use the addMethod() method to create your custom rule.


jQuery.validator.addMethod("taglength", function(value, element, params) {
    // your function to count characters in each word goes in here
    // use any of these arguments in your function: value, element, params
    //     value   => the present value of the field being tested
    //     element => the present field being tested
    //     params  => the parameters passed in when you declare the rule.  
    // example:  // taglength: 20  // params[0] would be 20
    // return true // if the field passes validation
    // return false // if the field fails validation and the message below will display
}, "One of your tags is greater than {0} characters."));

The online examples logically compare this.optional(element) to the function's result using an "OR" operator.

return this.optional(element) || { your result (true or false) };

Otherwise, your custom rule will make the field mandatory all the time. This may be ok for your situation, however, normally if you want the field mandatory you would also apply the required rule.

To see more custom method examples, look at the source of the additional-methods.js file.