Display jQuery fading warning message without using standard javascript alert window

Question

I have the following view, my question is to implement a jquery alert blocking message without using the usual js alertBox

Html form

<form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username"> password: <input type="password" name="pwd" placeholder="Password"> <input type="submit" value="Submit"> </form> 

javaScript code

 <script> function validateInputField() { var x = document.forms["userLogin"]["username"].value; var y = document.forms["userLogin"]["pwd"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } if (y == null || y == "") { alert("Password must be filled out"); return false; } } </script> 

Answer 1

You can simply add a div and display an error message within that div and use fadeIn and fadeOut to animate the same.

 function validateInputField() { var x = document.forms["userLogin"]["username"].value; var y = document.forms["userLogin"]["pwd"].value; if (x == null || x == "") { $(".alert").find('.message').text("Name must be filled out"); $(".alert").fadeIn("slow",function(){ setTimeout(function(){ $(".alert").fadeOut("slow"); },4000); }); return false; } if (y == null || y == "") { $(".alert").find('.message').text("Name must be filled out"); $(".alert").fadeIn("slow",function(){ setTimeout(function(){ $(".alert").fadeOut("slow"); },4000); }); return false; } } 

 .hide { display: none; } .alert { background: red; position: absolute; top: 50%; left: 40%; padding:20px; } .message { color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username">password: <input type="password" name="pwd" placeholder="Password"> <input type="submit" value="Submit"> </form> <div class="alert hide"> <div class="message"> </div> </div> 

To be more optimized

 function validateInputField() { var x = document.forms["userLogin"]["username"].value; var y = document.forms["userLogin"]["pwd"].value; if (x == null || x == "") { showAlert("Name must be filled out"); return false; } if (y == null || y == "") { showAlert("Password must be filled out"); return false; } } function showAlert(message) { $(".alert").find('.message').text(message); $(".alert").fadeIn("slow", function() { setTimeout(function() { $(".alert").fadeOut("slow"); }, 4000); }); } 

 .hide { display: none; } .alert { background: red; position: absolute; top: 50%; left: 40%; padding:20px; } .message { color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="userLogin" action="success.php" onsubmit="validateInputField()" method="post"> UserName: <input type="text" name="username" placeholder="Username">password: <input type="password" name="pwd" placeholder="Password"> <input type="submit" value="Submit"> </form> <div class="alert hide"> <div class="message"> </div> </div> 

Answer 2

Why not create your own?

Simple fadeIn() and fadeOut() can create really cool “alerts” and are very easy to use :)