Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Validating Forms with Spry

Dreamweaver CS4 and above a feature called Spry widgets that make it easy to validate form fields. Dreamweaver's Spry can be used to easily add neat validation to your form.
NOTE: You do not need to use any other validation with Spry because it will validate when you submit your form.

Create the form

1. Click on the field that you which to validate using Spry.
   In the example below, the field for Last Name was selected.
   
2. Make sure the Insert panel is visible. If you do not see it on the right side of the Dreamweaver screen, go to your menu bar at the top of the page and select Window > Insert
3. Make sure the Forms area is selected
   
4. Select Spry Validation Text Field.
5. When you mouse over the field in Dreamweaver Design view, a blue Spry tag will be displayed.
6. In the code view, spry wraps code around the input tag
   <label for="lastname">Last Name</label>
   <span id="sprytextfield2">
   <input name="lastname" type="text" id="lastname" accesskey="l" tabindex="2" size="30" maxlength="50" />
   <span class="textfieldRequiredMsg">A value is required.</span></span>
7. Dreamweaver also adds this code to the end of the body
   <!--
   var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
   var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
   //-->
   </script>
   Notice that the css file is located in the spry folder.
8. Dreamweaver creates external css and javascript for the validated text:
   <link href="/spry/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
   <script src="/spry/SpryValidationTextField.js" type="text/javascript"></script>
   <script type="text/javascript">
9. Upload your form, as well as the files in the spry folder, to your web hosting and test the change. Try not entering any information into the last name field and submit.The field that you added the spry validate text should be highlighted in red and an error message should be displayed. If you do not see this, make sure you uploaded the spry folder to the web hosting.
   

 

top of page

Page last updated: May 31, 2012 10:27 AM