>> I set up a basic demo - http://nonsponsored.com/validation/ - but it's
>> really not much different than your example form. So with showErrors,
>> you're saying I'm able color the Name, Email and Password labels also?
>> I'm not quite following how you can target those labels.
>>
>Ok, I've tried around a bit, and while its easy to add the class (see
>below), its not possible to remove it again. I'll try to find a nice
>solution that I can build into the plugin.
>
>$(document).ready(function(){
>
> $("#userForm").validate({
> focusInvalid: false,
> event: "blur",
> errorContainer: $("ul.error"),
> errorLabelContainer: $("ul.error"),
> wrapper: "li",
> rules: {
> name: { required: true },
> email: { required: true, email: true },
> password: { required: true }
> },
> messages: {
> name: "Name is a required field.",
> email: "Your email address is required.",
> password: "Password is a required field."
> },
> showErrors: function(errors, validator) {
> $.each(errors, function(key, value) {
> $("[EMAIL PROTECTED]" + key +
>"]").not(".error").addClass("highlight");
> });
> validator.defaultShowErrors();
> }
> });
>});
What I've done in the past is just add an onfocus event to remove the
classes:
// for any input field in the signup form, add a onfocus event
$("#userForm input").focus(
// everything in this function is executed
function (){
// $(this) performs the operation on the current jQuery
object
// this removes the error class from the field
$(this).removeClass("error");
// the label name is equal to the field "name" attribute
// for checkbox and radio elements and equal to the "id"
// attribute for all other fields
var sLabelName = ($(this)[0].type == "checkbox" ||
$(this)[0].type == "radio") ? $(this)[0].name : $(this)[0].id ;
// hide the error message for the current field
$("[EMAIL PROTECTED]" + $(this)[0].name +
"[EMAIL PROTECTED]").hide();
}
);
You probably want to use a more specific selector to just grab text fields,
radio, checkbox and textarea elements, but you get the idea.
It would be nice if this hook was automatically added by the validator
though...
-Dan
