Display a fading jQuery Alert Message without using traditional javascript alert-box

Question

I have the following form, my question is implementing a fadding JQuery Alert message without using the normal js alertBox

the 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 your 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 make your own?

A simple fadeIn() and fadeOut() can create a really cool "alert-box" and is super easy to use :)