Spry Textfield Validation Widget

Spry Textfield Validation Samples

This page gives examples of the textfield widget capabilities.

Here we have an example of a textfield widget that validates if the entered value is numeric. There are three validation techniques: validation can occur as-you-type (Change), when the textfield looses focus (Blur) or only when the form is submitted (Submit). The Submit validation occurs always, regardless of the other options chosen. There is also a character masking option in place, the user can only enter numeric characters.

The same validation widget can be used for other formats, like date or time validation. Notice the different date/time formats, the default hint strings that can be added and character masking. All the dates are validated on change, blur and submit.

The following is an example of a registration page. User must enter a valid e-mail address, a password between 6 and 10 characters, website URL and IP address. Each text input has a validation textfield widget applied, so that only correct values are entered. Also, the widget container is not span (as in the example above), but directly the <tr> tag from the table.

Here's an example of another type of validation: the first text input supports integer values between -10 and 10, while the second one validates if the entered input is a float value (it also supports scientific notation). The integer textfield allows you to enter invalid content (char masking is off), but it won't be submitted. Also, the widget supports default values.

The last textfield contains currency validation. In this case, the supported format is comma_dot (1,000,000.00).

The following is an example of a check-out form, with credit card, phone and zip validation. Moreover, phone and zip validatin have defined custom patterns and the character masking is enabled. (The text in bold represents the auto-complete sequence). Notice that the reset button resets the form to the original state, including validation.

The following example shows how to customize error messages. You can edit them directly in page, change the css class for them or remove them completely. Also, if you change the widget container id directly to the page element (Integer #2, which should validate the same as Integer #1), it will preserve the functionality, but the error messages will be ignored.

Integer #1:	(Between 100 and 999) You must enter a value! You must enter an integer value! The entered value is less than 100. The entered value is greater than the maximum required (999).
Min 2 chars/max 10 chars:	The value is required. You must enter at least 2 characters!! You can't enter more then 10 characters!!
Date:	(No error message)
Integer #2:	The value is required. Invalid format. The entered value is less than minimum required. The entered value is greater than the maximum required.

The following example shows how to validate a custom pattern. You can define your own pattern using the following pattern characters: 0 - any digit between 0-9, (A,a) - alphabetic characters, (X,x) - alpha-numeric characters, ? - any character. The character masking is enabled for this validation. (The text in bold represents the auto-complete sequence).

The following example shows how to validate using a custom made validation function. You can define your own javascript validation function that can validate a password strength or the password to be correcly retyped.

The textfield validation widget is able to display the error messages that are not in the same container as the validation input. The same classes mechanism that apply to the input form field container is applied to this second region too.

E-mail:	The value is required. Invalid format.
Password:	The value is required. The minimum number of characters not met. The maximum number of characters exceeded.
Website:	The value is required. Invalid format.
IP:	The value is required. Invalid format.

Credit card (Visa):	The value is required. Invalid format.
Credit card (Mastercard):	Invalid format. The value is required.
Phone:	The value is required. Invalid format.
Phone with custom pattern:	Pattern: 0040-000 000 000 The value is required. Invalid format.
Zip:	The value is required. Invalid format.
Zip with custom pattern:	Pattern: (000)-(AA)-0000 The value is required. Invalid format.

Password:	You must enter a value! 2 numbers, 2 chars and a non alpha numeric, length between 8 and 10.
Retype:	You must enter a value! The passwords not match.

Custom validation:	Pattern:000-000 AA 00 You must enter a value! Invalid format.

Integer:	(Between 100 and 999) You must enter a value! You must enter an integer value! The entered value is less than 100. The entered value is greater than the maximum required (999).
Errors:	You must enter a value! You must enter an integer value! The entered value is less than 100. The entered value is greater than the maximum required (999).