Tutorial for Spry Form Validation
Adobe's Dreamweaver web design software allows web developers to use Spry Validation Text Field widgets to create forms that display updated information on whether the user's input meets the validation criteria given by the developers. The Spry widget will also display error messages specific to the reason why the input failed to validate, such as an invalid format or an empty, required field. You can edit the Spry CSS file to change the appearance of the error messages and states.
Other People Are Reading
Instructions
-
-
1
Add a link to the Spry JavaScript library and CSS file in the section between the "<head>" tags at the top of the HTML page containing the form:
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
-
2
Determine which of the Spry form validation states apply to your form inputs. Inputs are in the "initial state" when the page first starts, and transition to the "focus state" when the user clicks or moves to it. Spry also contains states for when the form item does not meet a minimum or maximum number of characters, when it does not contain required data, when the data has an invalid format or if the user does not select a required check box or radio button.
-
-
3
Enclose the form input within "<span>" tags that apply the Spry settings to that input:
<span id="sprytextfield1"> ...... </span>
-
4
Add a span tag set directly after the line on the HMTL form input to specify which type of Spry error message state. To require some input for a text field, add "<span class="textfieldRequiredMsg">A value is required.</span>." You can change the text between the span tags to any text that you want. An example for a required check box is "<span class="checkboxRequiredMsg">Check at least one box.</span>."
-
5
Initialize the Spry validation widget after the closing HTML form tag by adding the JavaScript call to the widget fields, replacing "sprytextfield1" with the name used in the initial span tags that enclosed the entire form input:
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
-
1
