updating a warning message using jQuery

Question

I am using below code to validate hexadecimal numbers in a text box

$(document).ready(function () {
    $('#vbus-id').keyup(function () {
        var text_value = document.getElementById("vbus-id").value;

        if (!text_value.match(/\b[0-9A-F]\b/gi)) {
            document.getElementById("vbus-id").value = "";
            //  document.getElementById("vbus-id").focus(); 
            var message = "You have entered a invalid id.Vbus id ranges         from 0 to F in hexadecimal";
            test.innerHTML = message;
        }
    });
});

If any numbers entered other than 0 to 9 and A to F it will clear the textbox and show a warning message below. But if I add a correct number after that, the warning mesage is not clearing. How to clear the warning message if I enter a valid entry after a wrong entry ?

jsFiddle

Answer 1

You've defined what happens if the form doesn't validate (set the message), but you also need the define what to happens in the opposite case ( else ):

$(document).ready(function () {
    $('#vbus-id').keyup(function () {
        var text_value = document.getElementById("vbus-id").value;

        if (!text_value.match(/\b[0-9A-F]\b/gi)) {
            document.getElementById("vbus-id").value = "";
            //  document.getElementById("vbus-id").focus(); 
            var message = "You have entered a invalid id.Vbus id ranges         from 0 to F in hexadecimal";
            test.innerHTML = message;
        } else test.innerHTML = '';
    });
});

Answer 2

You could try always setting the message to blank first on keyup...

$('#vbus-id').keyup(function () {
    test.innerHTML = "";
    var text_value = document.getElementById("vbus-id").value;

...