Textbox Highlight red when no data inside it using javascript validation

Question

I have a Text-box which highlights red when I click on it (on focus). If I type anything inside it it highlights back to grey. But When I type something inside it and again delete all the data inside it doesn't highlight back to red. Please help me with it. Here is the piece of code I used for highlighting it red and grey:

$("#fname").bind('focus', function (e) {
    if ((document.getElementById("fname").value).length == 0) {
        document.getElementById("fname_error").style.display = "inline";
        $("#fname").attr('style', 'border: 1px solid #8C0005 !important;');

        return false;
    }
    else {
        document.getElementById("fname_error").style.display = "none";
    }
    return true;
});

$("#fname").keypress(function (e) {
    var iKeyCode = (e.which) ? e.which : e.keyCode


    if ((iKeyCode > 64 && iKeyCode < 91) || (iKeyCode > 96 && iKeyCode <      123) || iKeyCode==8 || iKeyCode == 9 ) {

                document.getElementById("fname_error").style.display = "none";
                $("#fname").attr('style', 'border: 1px solid #cccccc !important;');
                return true;

    }
    else {
            document.getElementById("fname_error").style.display = "inline";
            return false;
        }

});

score 0 · Accepted Answer · answered Jul 05 '16 at 07:01

0

That's because you are setting the red border inside focus event handler, and this event can not bi fired if the element is already focused.

Try moving this code to keyup handler.

answered Jul 05 '16 at 07:01

k102

7,861
7
49
69

I replaced focus word with keyup but by this when I click on the textbox it is not highlighting to red now, only keyup event is working. – munmun poddar Jul 05 '16 at 07:06
I combined both focus and keyup and it worked. Thanks for the help! – munmun poddar Jul 05 '16 at 07:08

Textbox Highlight red when no data inside it using javascript validation

1 Answers1