Creating a custom validator
Writing new validator
A validator has to follow the syntax:
The following example illustrates how to develop a simple validator which validates a password. The validator will treat a password as valid, if it satisfies all the conditions below:
- Must be more than 8 characters long
- Must contain at least one upper case character
- Must contain at least one lower case character
- Must contain at least one digit
In fact, you can add more conditions to make a secure password.
TipTo see how built-in validators are developed, you can look at their sources located inside the
Registering custom validator
There are two ways to reuse a custom validator.
We register a new validator named
checkPassword which is implemented by the
Since the validators are distinct by the names, the new validator name (
checkPassword, in the example above) has to be different with built-in validators.
Using the registerValidator() method
This approach should be used when the
FormValidation namespace doesn't exist. For example, when the library is used with ES6 module.
Adding custom message
Basically, the custom validator above works fine. It returns
false if the password doesn't satisfy any of conditions we define. The limitation here is that the user don't know which condition the password doesn't pass. It informs the same
The password is too weak message all the times.
To improve that, we can set a dynamic error message in custom validator:
Our password checker now indicates the reason for a weak password:
Now, the form shows exactly condition that we want the password to satisfy.
Adding meta data
The rules used in example above are too simple and can't cover most popular cases of weak password. For example, it doesn't check the simple password such as 123456, abcdef, .etc.
In this section, we will use the awesome Dropbox's zxcvbn library to build a password strength meter.
For anyone who haven't known about zxcvbn library, it's a password strength estimator inspired by password crackers developed by Dropbox. It can recognize and weighs 30k common passwords. For more information about this library, you can refer to its official page.
It's quite easy to use it to see how strong a given password is:
score is an integer number between 0 and 4 that indicates the strength level:
|0||Too guessable: risky password|
|1||Very guessable: protection from throttled online attacks|
|2||Somewhat guessable: protection from unthrottled online attacks|
|3||Safely unguessable: moderate protection from offline slow-hash scenario|
|4||Very unguessable: strong protection from offline slow-hash scenario|
Our custom validator will use zxcvbn and include score in its validation result:
Next, we will use the score which is inclued the meta data of validation result to show up a password strength meter.
Bootstrap's progress is used to simply demo the functionality.
We handle the core.validator.validated event to update the progress bar:
Lastly, for a full working demonstration, you can play with the following form:
TipTry to enter simple passwords such as 123456, abcdef, abc123 to see how they are treated