Search code examples
jqueryasp.net-mvcvalidationunobtrusive-validation

remote validation is behind one step in mvc


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');
            }
        });
    }
};

enter image description here


Solution

  • 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);
    }