Javascript automatically hide message and page redirect after 3 or 5 seconds

When submitting the form, whenever there is an error in the user's input, the program should prompt the user what is wrong, so that the user knows how to correct the error, so as to successfully complete the submission of the form. The usual practice is that when the user fills out all the items of the form and submits the form, it checks from the beginning and returns immediately when an error is detected, feeding back the specific error to the user, that is, displaying an error message on the client. In most cases, after the error message is displayed, it is always there. When the user corrects the error and submits it again, if there is no error in the check, the error message is no longer displayed. If there is an error after the correction, continue to show the reason for the error, and so on until all items are entered correctly and the form submission is completed.

The error message is usually relatively short and displayed in a particularly bright color. The user can read it in a second or two. It is more obvious to display it all the time. It is not better to hide it automatically after 3 or 5 seconds, it is very simple to achieve it with javascript, you can get it in a couple of sentences.

1. The prompt message is automatically hidden after 3 seconds or 5 seconds

Html code:

<ul class="ul">
              <li>Product: <input type="text" id="productId" /></li>
              <li>Brand: <input type="text" id="tagId" /></li>
              <li>Price: <input type="text" id="priId" /></li>
              <li><input type="button"; id="btnId" value=" Submit " onclick="return checkText()" />
              <span id="msgId" class="msg"></span></li>
       </ul>

Css code:

<style type="text/css">
              .ul{line-height:28px; list-style:none;} .msg{color:Red;}
       </style>

Javascript code:

<script type="text/javascript">
       function checkText() {
              var proId = document.getElementById("productId"), pp = document.getElementById("tagId"), priId = document.getElementById("priId"), msg = document.getElementById("msgId");
              if (proId.value == "") {
                     msg.innerHTML = "The product cannot be empty!";
                     setTimeout("hideMessage()", 3000);
                     return false;
              }
              if (pp.value == "") {
                     msg.innerHTML = "The brand cannot be empty!";
                     setTimeout("hideMessage()", 3000);
                     return false;
              }
              if (priId.value == "") {
                     msg.innerHTML = "The price cannot be empty!";
                     setTimeout("hideMessage()", 3000);
                     return false;
              }
              return true;
       }
       function hideMessage() {
              var msg = document.getElementById("msgId");
              msg.innerHTML = "";
       }
       </script>

After the above code realizes that the prompt message is shown when inputting error, the prompt message is hidden(cleared) after 3 seconds. It can be set to 5 seconds. Just change 3000 in the checkText() method to 5000, and set it to other time, it can be changed according to this method.

2. Javascript page redirect after 3 seconds or 5 seconds

If you want to automatically jump to another webpage after 3 seconds, the javascript code:

setTimeout("self.location = '/htm/index.htm'", 3000);

If you want to automatically jump after 5 seconds, just change 3000 to 5000.