How to hide/remove a error message after showing it to user after few second in javascript

Question

I am writing a script which will verify username . I am able to put check on user name. In case username is not fulfilling criteria then I am throwing error.

<script>
    //<![CDATA[
    function visitPage() {

        if (validateUsername()) {
            var div = document.getElementById("totalpricecheck");
            var spans = div.getElementsByTagName("span");

            var totalprice = spans[3].innerHTML;
            var name = document.getElementById("name").value;
            alert(name);


        }


    }

    function validateUsername(fld) {
        var fld = document.getElementById("name").value;
        var error = "";
        var illegalChars = /\W/; // allow letters, numbers, and underscores

        if (fld.value == "") {
            //fld.style.background = 'Yellow';
            error = "You didn't enter a username.\n";
            document.getElementById("nmessage").innerHTML = "You didn't enter a username.\n";
            // $("#nmessage").fadeOut(3000);
            // alert(error);
            return false;

        } else if ((fld.length < 5) || (fld.length > 50)) {
            //fld.style.background = 'Yellow';
            error = "The username is the wrong length.\n";
            document.getElementById("nmessage").innerHTML = "OOps!! The username is too short \n";
            // alert(error);
            return false;

        } else if (illegalChars.test(fld.value)) {
            //fld.style.background = 'Yellow';
            document.getElementById("nmessage").innerHTML = "The username contains Unsupported characters.\n";
            error = "The username contains Unsupported characters.\n";
            // alert(error);
            return false;

        } else {
            // fld.style.background = 'White';
        }
        return true;
    }
    return false;


    }

    // ]]>
</script>

I am trying to hide this error using fadeout effect as given in Hide div after a few seconds

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds

but am not getting how can I use jQuery method in JavaScript for error message removal. someone suggest me what are possible option I have to get desired effect.

Answer 1

Judging by your code here:

document.getElementById("nmessage").innerHTML ="The username contains Unsupported characters.\n";

Your setTimeout function is not calling the right div to hide. It should look like this:

setTimeout(function() {
    $('#nmessage').fadeOut('fast');
}, 1000); // <-- time in milliseconds

I also did not see this implemented in your script at all so add that setTimeout function call after you change the innerHTML.

Answer 2

1. As @iFTrue mentioned in the other post, correct div ID has to be provided.
2. As @chitrang mentioned in comment jQuery library has to be included in the page if its not already done.

To inlude jQuery from CDN use the below code. Paste it inside head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

You should set the timer inside visitPage()

function visitPage() {
               if(validateUsername()) {
                      var div = document.getElementById("totalpricecheck");
                      var spans=div.getElementsByTagName("span");

                      var totalprice=spans[3].innerHTML;
                      var name = document.getElementById("name").value;
                      alert(name);      
               }
               else {
                    // show error message 
                    $('#nmessage').show();

                    // hide error message after 3 sec 
                    setTimeout(function() {
                       $('#nmessage').fadeOut('fast');
                    }, 3000); 
               }
            }

Update

I see that you are using jQuery only to hide and show the div. If you don't need the fadeOut animation effect, you can remove jQuery library and use the below code.

function visitPage() {
               if(validateUsername()) {
                      var div = document.getElementById("totalpricecheck");
                      var spans=div.getElementsByTagName("span");

                      var totalprice=spans[3].innerHTML;
                      var name = document.getElementById("name").value;
                      alert(name);      
               }
               else {
                    // show error message 
                    document.getElementById("nmessage").style.display = 'block';
                    // hide error message after 3 sec 
                    setTimeout(function() {
                        document.getElementById("nmessage").style.display = 'none';
                    }, 3000); 
               }
            }