Adobe® Dreamweaver® CS4 Bible

681

Powering Ajax Pages with Spry

17

Using Validation Widgets with Tables

M

any designers use two- or three-column tables to keep their forms neat and tidy—and you’ll need to do

a little code manipulation to get Spry Validation widgets to fit within that structure. Say that you have a

three-column table, with the first column intended for labels, the second for the form field, and the third for

validation error messages. The best technique that I have discovered for integrating Spry Validation widgets

into such a table is to begin by placing the widget in the middle cell of the row. Assuming you have a label in

the first column, your code will look like this:

<tr>

<td>Name:</td>

<td><span id=”sprytextfield1”>

<input type=”text” name=”text1” id=”text1” />

<span class=”textfieldRequiredMsg”>A value is required.</span></span></td>

<td>&nbsp;</td>

</tr>

Next, move the id attribute, here id=”sprytextfield1”, from the outer <span> tag to the <tr> tag.

Then, delete the outer <span> tags; because you’ve identified the entire row with the Spry ID, these are no

longer necessary. Finally, move the <span> tag with the required message to the third column. Your final

code will look like this:

<tr id=”sprytextfield1”>

<td>Name:</td>

<td><input type=”text” name=”text1” id=”text1” /></td>

<td><span class=”textfieldRequiredMsg”>A value is required.</span></td>

</tr>

Unfortunately, this rearrangement of the ...