Spry Password Validation Samples

This page provides examples of the password widget capabilities.

In the first example, there is a password widget that checks if the field is not empty, when the password is required. The validation event can be 'onChange' - this means the validation will be triggered as you type. 'onBlur' - when the password field loses focus, and validation 'onSubmit' - when the form is submitted. All Spry Validation widgets validate onSubmit. 'onBlur' and 'onChange' are options.


A value is required.

A value is required.

A value is required.

The password validation widget can have conditions to increase the password complexity. This example contains a password validation widget that has to receive a minimum 6 characters and maximum 20 characters to pass the validation.

Min 6 chars A value is required. The minimum number of characters not met.
Max 20 chars A value is required. The maximum number of characters exceed
Min 6 chars, Max 20 chars A value is required. The minimum number of characters not met. The maximum number of characters exceeded.
 

Using the password validation widget, you can define your own password strength by adding a combination of conditions.
In the first password example below you can have: a maximum 20 characters (any kind of character: number, special chars, etc.), but there should be a minimum of 3 Alphabetical (alpha) chars and maximum 6 Alpha characters to be a valid password.
The next password field uses min/maxUpperAlphaChars (any alpha character in upper case).
You can add conditions to the password field to force a min/max number of numeric characters and also a min/max number of special characters, as you can see in the last two examples of this section.

Max 20 chars, min 3 Alpha chars/max 6 Alpha chars A value is required. The maximum number of characters exceeded. The password strength condition not met
Max 20 chars, min 2 upper Alpha chars/max 5 upper Alpha chars A value is required. The maximum number of characters exceeded. The password strength condition not met.
Min 6 chars, min 2 Number chars/max 5 Number chars A value is required. The minimum number of characters not met. The password strength condition not met.
Min 6 chars, min 2 Special chars/max 5 Special chars A value is required. The minimum number of characters not met. The password strength condition not met.
 

This example shows how to disallow special characters and numbers for your password.

No Special chars are allowed A value is required. The password strength condition not met.
No numeric chars are allowed A value is required. The password strength condition not met.
 

You can also use a fixed number of characters for password by specifying the same value for min and max options.

Only 2 numeric chars are allowed, no more, no less A value is required. The password strength condition not met.
Only 2 upper case chars are allowed, no more, no less A value is required. The password strength condition not met.
 
To pass the validation in this example, the password should have at least: 2 number characters, 2 alpha characters in upper case and one Special character. The maximum length should be between 8 and 10 characters.

The second input in this section is the password confirmation. To use this functionality you have to use the Confirm Validation Widget.

Min 2 Numbers, min 2 Alpha Upper chars, min 1 Special chars, min 8 chars/max 10 chars A value is required. The maximum number of characters exceeded. The minimum number of characters not met. The password strength condition not met.
Verifies the re-entered password as identical with first. A value is required. The values don't match
 

You can set an additional error message for the password widget in case you want to give more intuitive details to the user about what should be filled in.

Min 6 chars A value is required. The minimum number of characters not met.
Verifies if the re-entered password is identical with first one A value is required. The values don't match
Errors: You must enter a password! You should have at least 6 characters for your password.

The following example shows how to change the default appearance for the error messages, by over-writing the default css classes.

Min 6 chars, min 1 Special char A value is required. The minimum number of characters not met. The password strength condition not met.