kapowaz schrieb:
I'm looking to modify the markup surrounding my form elements once
validation has taken place so as to indicate success/failure with a
particular input element's contents, and I'm wondering if the Validate
plugin can do this without any modification? To give an example,
imagine I have the following markup:
<dl>
<dt><label for="username">Username</label></dt>
<dd><input name="username" /></dd>
<dt><label for="password">Password</label></dt>
<dd><input type="password" name="password" /></dd>
<dt><label for="confirmpassword">Confirm password</label></dt>
<dd><input type="password" name="confirmpassword" /></dd>
</dl>
Adding validation rules to this using the plugin is very easy, and
since by default it will add a class of error to any elements with
invalid values, I can add a highlight rule for inputs easily enough.
However, what I'd like to do is set a class of 'pass' or 'fail' to the
containing DD element, so that I can indicate which fields have been
successfully filled in.
If I was doing this in a nice jQuery-esque fashion, I'd hook in some
functionality to addClass/removeClass using a custom event, but as far
as I can see this plugin doesn't provide any custom events to handle
this (unless I'm missing something blindingly obvious?). Can anybody
suggest a route to achieving what I've got in mind that doesn't
involve hacking the plugin itself?
The highlight and unhighlight options should do the trick. Something
like this:
$(...).validate({
highlight: function(element, errorClass) {
$(element).parent().andSelf().addClass(errorClass);
}, ...
});
Jörn
