Mfuon Leonard Mfuon Leonard - 5 months ago 21
HTML Question

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

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

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>

Comments