MVC3 unobtrusive validation move validation to custom element

Question

Serverside I render a hiddenfield, I then use a jquery widget called flexbox to create a combobox, it creates a input element client side and copies the selected ID (Not text) to the hidden field once you select something in the box.

The problem is that the validation code adds a classname to the hiddenfield when something is wrong with validation, I want it to be added to the input element, can I somehow listen to when the classname is added, or somehove hook into the event and move the classname to the inputfield.

This works but its ugly as hell, would like a better solution

var oldClass = $hdn.attr('class');

setInterval(function () {
    if (oldClass != $hdn.attr('class')) {
        $input.removeClass(oldClass);
        oldClass = $hdn.attr('class');
        $input.addClass($hdn.attr('class'));
    }
}, 200);

Thanks.

counsellorben · Answer 1 · 2011-10-18T15:26:10.297

Where I have a hidden element being validated, I add a custom attribute, data-val-visibleid. Then, in jquery.validate.js, I modify the highlight and unhighlight functions by adding the following at the end of both functions:

if ($(element).is(":hidden")) {
    var targetId = $(element).attr("data-val-visibleid");
    $("#" + targetId).addClass(errorClass).removeClass(validClass);
}

Some people do not like to meddle in jquery.validate.js, but it is usually the easiest method to achieve customizations like this.

UPDATE

I did some research, and discovered that jquery.validate has a nifty setDefault method, where you can override the default functions, such as highlight() and unhighlight. Add the following to your page after the other scripts have been loaded:

$.validator.setDefaults( {
    highlight: function (element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        if ($(element).is(":hidden")) {
            var targetId = $(element).attr("data-val-visibleid");
            $("#" + targetId).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        if ($(element).is(":hidden")) {
            var targetId = $(element).attr("data-val-visibleid");
            $("#" + targetId).addClass(errorClass).removeClass(validClass);
        }
    }
});

This will override the default functions, without changing the underlying script.

In my last project we couldnt update jquery or jquery UI because some one had done too many changes to those files so I support those that do not like changing in the API files.. I was hoping there was a cleaner solution — Anders, Oct 18 '11 at 13:49
Anders, I have never been too happy about the modifications to the core jquery.validate file, so I checked further, and saw that it has a `setDefault` function, so you can have an external script containing your custom overrides. — counsellorben, Oct 18 '11 at 15:29
Strange, my custom highlight method does not trgger when i trigger validate from script this.searchForm.valid(), it works if i submit, that is very strange? — Anders, Oct 19 '11 at 07:14
Anders, calling `valid()` does not invoke `showErrors` in jquery.validate. To invoke `showErrors` (which calls `highlight`), you need to call the `form` function, like so: `this.searchForm.valid().form()`. — counsellorben, Oct 19 '11 at 13:06

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

I found both these answers to be very helpful and just wanted to add for anyone using version 1.9.0 of the Validation plugin that you will need to override the default behavior that ignores hidden fields as detailed in this other post: jQuery Validate - Enable validation for hidden fields

edited May 23 '17 at 12:11

Community

1
1

answered Aug 09 '14 at 21:54

LoJo

142
2
11

score 1 · Accepted Answer · answered Oct 19 '11 at 07:24

Thanks to Counsellorben i found a good solution, I did it in a slightly different way though. First i override the default methods in my master object contructor which is is constructed at document.ready. document.ready is however too late and your methods will not trigger when doing a triggering validation from form.valid() it will however trigg when doing a submit (very strange) this code works both for submit and triggered from script

(function() {
    var highlight = $.validator.defaults.highlight;
    var unhighlight = $.validator.defaults.unhighlight;

    $.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if ($(element).attr("data-val-visualId") != null) {
                element = $("#" + $(element).attr("data-val-visualId"))[0];
            }
            highlight(element, errorClass, validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            if ($(element).attr("data-val-visualId") != null) {
                element = $("#" + $(element).attr("data-val-visualId"))[0];
            }
            unhighlight(element, errorClass, validClass);
        }
    });
})();

MVC3 unobtrusive validation move validation to custom element

3 Answers3