Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I check for exact length using jQuery Validation?

Using the jQuery Validation plugin to validate forms, how would you confirm that a string is exactly X characters long?

like image 477
Nathan Long Avatar asked Aug 04 '09 18:08

Nathan Long


People also ask

What is valid () in jQuery?

valid() from the jQuery Validation plugin: $("#form_id"). valid(); Checks whether the selected form is valid or whether all selected elements are valid.

What jQuery Unobstructive validation is?

jQuery is a Javascript library. An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.

What is validator addMethod in jQuery?

validator. addMethod( name, method [, message ] ) Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.


1 Answers

Since there is (currently) no built-in method for this, you'd need to add your own method. This would work:

jQuery.validator.addMethod("exactlength", function(value, element, param) {  return this.optional(element) || value.length == param; }, $.validator.format("Please enter exactly {0} characters.")); 

Which could then be used like this:

$("#formtovalidate").validate({   rules: {     somefield: {       exactlength: 10     }    }); 

Update - How it Works

I've been asked how this works. I don't know all the details; I modeled this method on previously existing ones. However, this is my best attempt to explain it.

  • The function takes in value, element, and param.
    • value is the value entered in the field being validated
    • element is the field itself
    • param is whatever comes after the rule type and colon. In the example above, it's the 10 in exactlength: 10
  • The next line is a return statement. This will give the final verdict of the validation method back to the code that called it. Any validation method that returns true is saying 'this field passes validation!' It will return the value of the line it's on.
  • The return is followed by two declarations, separated by an 'or' operator (||).
    • The || operator means 'evaluate the item left of this. If it's true, return true. If not, try the one on the right. If it's true, return true. Otherwise, return false.'
      • The item on the left is this.optional(element). If the element is not required in your rules, this will return true, and so will the validation. Which means 'If I don't tell you that this field is required, I don't care whether it validates.'
      • If the field is required, we move to the right side of the ||. This is the actual validation test. It compares the length of the field's input with the length you specified it should be. If they are the same, it returns true, the method returns true, and validation passes. Otherwise, validation fails.

That's about it. For further help, see the documentation, particularly the part about custom validation methods.

like image 57
Nathan Long Avatar answered Oct 11 '22 12:10

Nathan Long