CODEWITHSUNDEEP
javascriptjqueryhtml
SantyEssac
SantyEssac

Reputation: 809

Class is not getting removed after removeClass JQuery

Hi I have a text box 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="150" name="AltPhone" tabindex="33" type="text"
  value="" class="input-validation-error">

I want to remove class="input-validation-error" on tab key and the code for that is as follows:

$(document).ready(function () {
            $("#AltPhone").live('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code == 9) {
                    $(this).removeClass('input-validation-error');
                    e.stopPropagation();
                }
            });
        });

but still I am not able to remove that class from the text box.Here the function being called and also invoking the following line of the code but still that class is appearing at the text box after the function called finished.

$(this).removeClass('input-validation-error');

Upvotes: 0

Views: 80

Answers (3)

dady
dady

Reputation: 11

Maybe it's because this key intercepts your browser. Try a different key, for example ENTER.

Upvotes: 0

dchayka
dchayka

Reputation: 1302

Use .keydown() event instead.

$(document).ready(function () {
            $("#AltPhone").keydown(function (e) {
                var code = e.keyCode || e.which;
                if (code == 9) {
                    $(this).removeClass('input-validation-error');
                    e.stopPropagation();
                }
            });
        });

Working example: https://jsfiddle.net/j2y9w1x6/

After clicking Tab key, inspect the element in Result section to see that validation class has been removed.

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5574

there is a proper event to manage tab on input, use blur

$("#AltPhone").on('blur', function (e) {
      //code here
});

Upvotes: 3

Related Questions