Form validation is the process to validate data considering some requirements established. So if you introduce an incorrect value in a field this validation must control this event and show a message or another similar action in response.

Spry offers a transparent method to designer which allow to manage these situations with flexibiliby.

Concepts in Spry validation process

Spry elements (widgets)
The elements that allow validation with Spry are:
- TextField
- TextArea
- Select
- Checkbox
Each one has his own properties, but in general they have a similar procedure.

Structure
Spry define a flexible structure to display a correct validation:
- General container, with an identifier to refer with Spry object at.
- Spry element (widget).
- Error messages, with implemented CSS classes.
- Spry object, with initialized params (container id, format, event, etc.).

Example:

<div id="sprytextfield1">
<label><input style="width:250px;margin:0px 0px 5px 0px;"
 type="text" name="text1" id="text1" /></label>
<span class="textfieldRequiredMsg">Required value.</span>
<span class="textfieldInvalidFormatMsg">Invalid format,
 it expected an integer.</span>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField
 ("sprytextfield1","integer", validateOn:["blur"]});
</script>
</div>

Spry Object
It must defined a Spry object for every validation in the form as:

var sprytextfield1 = new Spry.Widget.ValidationTextField ("sprytextfield1");

This object controls validation process through a fixed structure implemented with the HTML element to validate.

State
Elements are displayed in a zone on screen called state where it is showed Spry interaction. So, an ‘initial state’ display a different style than a ‘focus state’. Each state match with a special situation with Spry framework (style, behavior, etc.). States are inherents to HTML object and can be modified.

Error type
Normally validations react to show a message that match with different errors for every element. Spry associate error messages with a CSS class which apply a style, so it’s possible to differentiate between an error message like ‘required value’ and other like ‘format error’.
Errors are included in a container (SPAN, DIV, etc.) that display them in time but they are corretly identified.

Validation format
For each element is defined a rule to validate it which depends of its features.
For example, if we want a TextField accept only numbers then validation format will be “integer” and the code was:

var sprytextfield1 = new Spry.Widget.ValidationTextField ("sprytextfield1","integer");

Validation event
That is the time when event is dispatched, when validation is caused. By default, this event is a ’submit’ in the form but is configurable in every case.

For example, if we need text validation happen in a los focus event, the code was:

var sprytextfield1 = new Spry.Widget.ValidationTextField ("sprytextfield1","integer", {validateOn:["blur"]});

Validation style
Designers can manage a style sheet associated with every Spry object to define its visual aspect.

More Adobe offical documentation in Dreamweaver Devnet y Adobe livedoc