
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> </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 ...