I'm looking into various form validating libraries and one of the ones
I'm considering is jquery.validate. It appears at first glance to be
very flexible, but its documentation is a bit overwhelming at first
glance!
In my forms I'm using the following structure for fields and
associated text.
<li>
<label for="foo">
Some text describing the field here
<span class="errormsg">Hidden error message goes here</span>
</label>
<input name="foo" />
</li>
I've got css that looks like this:
li label span.errormsg {
display: none;
}
li.formerr label span.errormsg {
display: block;
}
Whether or not the error message is visible depends on what class the
li element has. If the li has a class of "formerr" then the error
message displays (and other formatting is applied to indicate an
error, but as it's not important to the problem at hand I've left that
out). If the li doesn't have a formerr class then the error message
is hidden.
What I need to do is get the validate plugin to toggle the class of
the form control's parent element (the li) depending on if the content
is valid is not
$(this).parent ().addClass ('formerr') // Add error class
$(this).parent ().removeClass ('formerr') // remove error class
I don't need the validate pligin to do anything else, like add text to
the DOM or anything like that, just toggle the class of the item's
parent. I just can't figure out how to do that. My server side
validation adds the formerr class to li items that contain invalid
form controls, it would be nice if my client side validation worked
the same way. I don't want to have to do things such as write all the
error messages out twice (once for the js and once again for the PHP).
