remote validation is behind one step in mvc

Question

Is anyone else getting this issue? Remote validation on unobtrusive in mvc is behind by one step.

I am trying to validate a field and if the field is valid, a checkmark appears beside it. Everything is working except for remote.

Please see image (gif) attached. In this gif, I have two forms with a blur listener. I check if valid/invalid. If the field is valid, the checkmark appears else, should disappear.

I got it working for confirm email but not the 'Field Two Remote validation'. The checkmark disappears once I focus then blur

Anyone else experiencing this? If I do a reverse which is I enter the email confirmation first, I get the same issue

code to make the checkmark show:

$.fn.addCheckIconTextBox = function (options) {
    var settings = $.extend({
        // These are the defaults.
        id: "#" + $(this).attr('id')
    }, options);
    if ($(settings.id).length > 0) {
        $(settings.id).blur(function (e) {
            console.log("isvalid " + $('form').validate().element(settings.id));
            if ($(settings.id).val() !== '') {
                if ($(settings.id).hasClass('input-validation-error')) {
                    $(settings.id).next('.helper').attr('class', 'ico helper');
                } else {
                    $(settings.id).next('.helper').attr('class', 'ico helper pass');
                }
            } else {
                $(settings.id).next('.helper').attr('class', 'ico helper');
            }
        });
    }
};

You should be checking `if ($(settings.id).valid())`, not if the class exists or not. This may be happening because a `RemoteAttribute` is making an ajax (async) call and your checking if the class exists before the ajax has completed. — , May 25 '16 at 04:37
forgot to mention. i tried that one too. same issue. the reason i look for the class because i it behaves correctly. meaning the red border highlighting the error is correct. Jquery unobtrusive adds that class and then we decorate that class. `if ($(settings.id).val() !== '') { if (!$(settings.id).valid()) { //remove checkmark } else { //add checkmark } } else { //remove checkmark }` — Denise Michelle del Bando, May 25 '16 at 13:24
correction. it is jquery validate that adds the class not jquery unobtrusive. I think this gives me a clue how to fix this. i need some sort of callback — Denise Michelle del Bando, May 25 '16 at 13:55
The only thing that `jquery.validate.unobtrusive,js` does is to parse the html and add the rules/messages to `jquery.validate` based on the `data-val-*` attributes your generating — , May 25 '16 at 13:59
yeah. thats why i corrected myself. anyway, i got it working now. We have to listen when it highlights/unhighlights the field http://stackoverflow.com/questions/16196633/trouble-attaching-call-back-to-unobtrusive-validation-show-error — Denise Michelle del Bando, May 25 '16 at 15:46
Good to here. You should add your own answer (or I can mark it as a dupe) — , May 25 '16 at 22:12
its not really a duplicate. my use case is different with the link i provided but the solution provided there is also applicable here. I will just keep it as answered. anyone out there who has a similar use case can refer here. — Denise Michelle del Bando, May 26 '16 at 15:20

score 1 · Accepted Answer · edited May 23 '17 at 12:24

answer is based on: Trouble Attaching Call Back to Unobtrusive Validation Show Error

/**add/remove form icon when valid/invalid only when svg.helper is beside it**/
v.settings.highlight = function (element, errorClass, validClass) {
    var elId = $(element).attr('id');
    var checkIconEl = $('#' + elId).next('.helper');
    checkIconEl.attr('class', 'ico helper');
    originalHighlight.call(v, element, errorClass, validClass);
}
v.settings.unhighlight = function (element, errorClass, validClass) {
    var elId = $(element).attr('id');
    var checkIconEl = $('#' + elId).next('.helper');
    checkIconEl.attr('class', 'ico helper pass');
    originalUnHighlight.call(v, element, errorClass, validClass);
}

remote validation is behind one step in mvc

1 Answers1