I need to add a class to div that is wrapped around the select element upon validation.

$("#Form").validate({
    invalidHandler: function (form, validator) {
        $("[id$='_DropDownList']").each(function () {
            // How do I figure out if $(this) is valid or invalid?
            // Add the class below if invalid.
            $(this).parent().addClass("error");
        });
    }
});

I need to add a class to div that is wrapped around the select element upon validation.

$("#Form").validate({
    invalidHandler: function (form, validator) {
        $("[id$='_DropDownList']").each(function () {
            // How do I figure out if $(this) is valid or invalid?
            // Add the class below if invalid.
            $(this).parent().addClass("error");
        });
    }
});

• javascript
• jquery
• validation
• jquery-plugins
• jquery-validate

3 Answers 3

You can use the .valid() method, like this:

$("#Form").validate({
    invalidHandler: function (form, validator) {
        $("[id$='_DropDownList']").each(function () {
            if(!$(this).valid())
              $(this).parent().addClass("error");
        });
    }
});

However, the highlight and unhightlight options are specifically for this:

$("#Form").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).parent().removeClass(validClass).addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).parent().removeClass(errorClass).addClass(validClass);
  }
});

It looks like this code is correct:

$(this).parent().addClass("error");

Maybe your issue is with the code surrounding it... Try moving your addClass line outside the function it is in to see if it work there.

invalidHandler is only called when the form is submitted and not valid. I believe adding your code under that function alone is enough.