onBlur and onFocus event

Question

I have a textbox that is using a masking plugin for Phone and onblur I am removing a particular class. However on tab key from another field it again turns to red. The code is as follows:

<input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">

$("#AltPhone").blur(function () {
    $(this).removeClass('input-validation-error');
    $("label[for='AltPhone']").removeClass('input-validation-error');
});

$("#AltPhone").focus(function () {
   $("label[for='AltPhone']").removeClass('input-validation-error');
   $(this).removeClass('input-validation-error');
});

The blur function is working as expected, but focus is not.

Answer 1

Please check this code will work for you and let me know.

$("#AltPhone").focusout(function () {
   $("label[for='AltPhone']").removeClass('input-validation-error');
   $(this).removeClass('input-validation-error');
});

Answer 2

As you can see in console its working fine .Don't know but it may be because of your plugin.If possible please post some code.

 $("#AltPhone").blur(function () { $(this).removeClass('input-validation-error'); $("label[for='AltPhone']").removeClass('input-validation-error'); console.log("blur"); }); $("#AltPhone").focus(function () { $("label[for='AltPhone']").removeClass('input-validation-error'); $(this).removeClass('input-validation-error'); console.log("focus"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\\([2-9]\\d{2}\\)|[2-9]\\d{2})-?[2-9]\\d{2}-?\\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">