CODEWITHSUNDEEP
jqueryautocompletejquery-validate
Timmy Von Heiss
Timmy Von Heiss

Reputation: 2218

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"
 aria-invalid="true">

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:

$('form#dropform3').validate({
  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.

edit

'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.");

Upvotes: 0

Views: 615

Answers (1)

Sparky
Sparky

Reputation: 98748

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.

Example:

jQuery.validator.addMethod("taglength", function(value, element, param) {
    // 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
    //     param   => the parameter(s) passed in when you declare the rule.  
    // example:  // taglength: 20  // param 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.

EDIT based on OP's attempt:

within .validate():

'photo[tag_list]': {
    taglength: 20
}

custom method:

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

DEMO: jsfiddle.net/y27v7vgc/

Upvotes: 1

Related Questions