How to override success behavior for one form?

Question

We are working on Asp.Net MVC, using JQuery Validation with Bootstrap and jquery.validate.unobtrusive to show Success and Error states in our forms. This is more or less the configuration of our defaults:

jQuery.validator.setDefaults({
        ignore: "",
        validClass: "has-success",
        errorClass: "has-error",
        highlight: function(element, errorClass, validClass) {           
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).closest('.form-group').removeClass(validClass).addClass(errorClass);                
            }
        },
        unhighlight: function(element, errorClass, validClass) {            
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).closest('.form-group').removeClass(errorClass).addClass(validClass);
            }
        }
    });

What is the correct way to override this for a specific form on a page? I don't want to fully override the defaults.

This is a change I want to do for only one form in one page (User requested a different behavior). The form doesn't have validators, so it never shows/uses the error style, but when the user selects a value on a field, the "success" style kicks in anyway, and we don't want to show it either.

What is the correct way to override the highlight and unhilight behaviors for a specific form on a page?

Answer 1

Thanks to @Sparky for helping me understand the issue better!

As he said for most scenarios if you have jquery.validate and jquery.validate.unobtrusive and you need to override the defaults settings for only one form in a page, you either have to:

• override them for all forms
• or remove the jquery.validate.unobtrusive and configure each form separately.

However, following this post I realized you can override certain things using the validation object of a form (once created).

The example in the link doesn't work, probably, because by the time he tries to override the event, the original one was already attached.

But in my case the issue could be solved changing the validClass setting.

$(document).ready(function () {
    // get the validator instance
    var validate = $(".my-form").validate();

    // overwrite validClass
    validate.settings.validClass = "";
}