Nicole Henningsen's Blog
Posted At : November 5, 2007 3:23 PM | Posted By : Nicole Henningsen

Spry form Validation

I have stared playing around a little more with the form validation for Spry to get a better understanding of how it works. I am pretty impressed with the features.

A Spry Validation widget is a field that displays valid or invalid states when the user enters text. For example, you can add a Validation Text Field widget to a form in which is a required field or that is. If the user does not enter the correct information into the field (or no information at all) the widget will return a message stating that the information is either incorrect or is missing.

Check it out...

If you haven't downloaded the Spry framwork yet you can download it Here

The form validation is fairly easy to set up. All you need is your Spry include files that are downloaded with the framework.

Here is an example of a textbox for Spry

<div id="firstName">
         <div class="formLabel">First Name:</div>
         <input name="fname" type="text" id="fname" value="" />
         <img src="SpryAssets/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
         <span class="textfieldRequiredMsg"><img src="SpryAssets/error.gif">Please enter your First Name.</span>
      </div>
When you enter your first name and hit tab or select one of the other text fields it will come up with a check mark on the side of the text box indicating that the field has been checked and is "approved".

The textfieldRequiredMSG on submit will check to see if the information was entered if not it will come up with an error Please enter your First Name. This is great for me that means I don't have to add a lot of extra code to display what the error is etc. (I like to keep my code as simple as possible...a lot less work for me)

You will then reference your div id in the script block

<script>   
var firstName = new Spry.Widget.ValidationTextField("firstName", "none", {useCharacterMasking:true, validateOn:["change"]});
</script>
The validateOn can be set up on blur or on Change. I set mine up to use change. It just depends on what your preferences is.
["blur"]; ["change"]; or both together (["blur", "change"])

You can view the full code here Form Validation

First Name:
Valid Please enter your First Name.
Last Name:
Valid Please enter your Last Name.
City:
Valid Please enter your City.

State:

Valid Please select a State.

Date:
Valid Please enter a date. Please enter a valid date (mm/dd/yyyy).

Description: