We needed to apply some custom validation rules to some form fields using the jQuery Validation Plugin.
The decision of which fields were contained in a given form was taken dynamically, so instead of dynamically creating a rules object to pass it to the validate method, we decided to use HTML5 data attributes.
In the following example, I'll show you a way to do it.
Imagine that we'd like to validate that the first name introduced in a form is a palindrome.
To do it you could add a custom rule palindrome to the jQuery Validation plugin using its addMethod method and then validate the form, as shown in this JavaScript code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var customValidations = (function() { | |
| function reverse(word) { | |
| var i, reversedLetters = []; | |
| for (i = word.length - 1; i >= 0; i--) { | |
| reversedLetters.push(word[i]); | |
| } | |
| return reversedLetters.join(''); | |
| } | |
| return { | |
| isPalindrome: function(word) { | |
| return reverse(word) === word; | |
| } | |
| } | |
| })(); | |
| $.validator.addMethod("palindrome", function(value) { | |
| return customValidations.isPalindrome(value); | |
| }); | |
| $("#exampleForm").validate(); |
In the form we can refer to this custom rule using HTML5 data attributes:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <form id="exampleForm" action="" autocomplete="on"> | |
| First name: | |
| <input type="text" name="fname" required | |
| data-rule-palindrome="true" | |
| data-msg-palindrome="Please introduce a palindrome"><br> | |
| Last name: | |
| <input type="text" name="lname" required><br> | |
| <input type="submit"> | |
| </form> | |
| <script | |
| src="http://code.jquery.com/jquery-1.11.1.min.js"> | |
| </script> | |
| <script | |
| src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> | |
| </script> | |
| <script | |
| src="validation.js"> | |
| </script> | |
| </body> | |
| </html> |
We used data-rule-palindrome="true" to state that the fname field must contain a palindrome and data-msg-palindrome="Please your name must be a palindrome" to set the message that is shown in case it's not a palindrome.
In a nutshell, using jQuery Validation plugin with a custom rule and HTML5 data attributes is as easy as adding a custom rule with addMethod and then adding in the field you want to validate with the custom rule:
- data-rule + custom_rule_name="true" to apply the rule to a given field
- data-msg- + custom_rule_name = "message" to set the error message
I hope you might find this useful
No comments:
Post a Comment