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