jquery - How to hideremove a error message after showing it to user after few second in javascript - Stack Overflow

admin管理员组

文章数量:1414605

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.

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.

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 10:26 CommunityBot 111 silver badge asked Aug 17, 2015 at 17:00 nandnand 51722 gold badges1313 silver badges3030 bronze badges 2

• Well the code you said should do it nees to target the element. Did you use the right ID?? – epascarello Commented Aug 17, 2015 at 17:04
• 2 Have you included jQuery library in your code? – Chitrang Commented Aug 17, 2015 at 17:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

1. As @iFTrue mentioned in the other post, correct div ID has to be provided.
2. As @chitrang mentioned in ment 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./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); 
               }
            }

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.

本文标签：