Display error message in div using javascript – How to display error without alert box using JavaScript?

display error message in div using javascript validation is one of the most appealing part in web development where you can display errors messages to users.

display error message in div using javascript – How to show an error message beside a field in HTML using Javascript

In this tutorial, i am going to see how to display an error message beside an input in JavaScript.

Example

index.html

<html>
   <head>
      <script> 
         function checkFormIsValid()                                 
         { 
             var name = document.forms["loginFrm"]["name"];         
             if (name.value == ""){ 
                 document.getElementById('displayerr').innerHTML="Please enter a valid name";  
                 name.focus(); 
                 return false; 
             }else{
                 document.getElementById('displayerr').innerHTML="";  
             }
         }
      </script> 
      <style>
         .error{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
   </head>
   <body>
      <form name="loginFrm" onsubmit="return checkFormIsValid()">
         <p>Your name: <input type="text" name="name" class="field-long"/>  <span class="error" id="displayerr"></span></p>
         <p><input type="submit" value="Send"></p>
      </form>
   </body>
</html>

JavaScript Error message Property

try {
  adddlert("Welcome India!");
}
catch(err) {
  document.getElementById("player").innerHTML = err.message;
}

bootstrap alert box

Alert classes you can use to check

  • .alert-primary
  • .alert-secondary
  • .alert-success
  • .alert-danger
  • .alert-warning
  • .alert-info
  • .alert-light
  • .alert-dark
Read Also:  How to change href attribute of a hyperlink using jQuery?

Don’t Miss : How To Display Error Message In Javascript Without Alert?

Simple alert:

<div class="alert alert-primary" role="alert">
  This is a main useful alert—check it out!
</div>

Trigger via javascript:

$(".alert").alert();

I hope you get an idea about Display error message in div using javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this Article are always welcome.
If you enjoyed and liked this post, don’t forget to share.