Spry Confirm Validation Samples

This page provides examples of the Spry Confirm Validation widget capabilities.

In the first example, there is a Confirm widget for each password widget field. The confirm widget verifies that the entered value for the password widget is the same as the value in the confirm password field. The validation event can be 'onChange' - this means the validation will be triggered as you type, or 'onBlur' - when the password field loses focus and lastly, ' onSubmit' - when the form is submitted. By default, all Spry Validation widgets validate onSubmit. 'onBlur' and 'onChange' are options.

Password
A value is required.
Password
A value is required.
Password
A value is required.

Confirm Password
A value is required. The values don't match

Confirm password
A value is required. The values don't match

Confirm Password
A value is required. The values don't match

The Confirm widget can be applied to a normal input field, so you can verify if the values from the two different text fields are identical. The following example shows how to verify if the email address is the identical between the two fields.

Enter an email address.
Re-enter your email address A value is required. The values don't match
 

The following example shows a Textfield Validation widget to which is attached a Confirm validation widget that verifies that the two emails entered are identical. The textfiled widget is using the email format.

Enter an email address. A value is required. Invalid format.
Re-enter your email address A value is required. The values don't match
 

To provide more details to the user, you can add an additional error message for it. The example below shows how to set an additonal error message to the Confirm widget. The password field is a normal input field with type set on password.

A value is required. The values don't match
Errors: You must enter a password! The form will not be submitted untill the Password and Confirm Password fields have the same values.

The following example shows how to change the default appeareance for error messages. Spry overwrites the default CSS classes for error messages by adding new properties for these classes. In this example, the error message color should be blue.

A value is required. The values don't match

You can also change the widget container to use the textfield label tag as anerror message.