JSFiddle - React, Tailwind, and code Playground

by zaza zviaduari

HTML

<body>
  <div class="container">
    <div class="main">
      <h2>Login Form Validation</h2>
      <form id="form_id" method="post" name="myform"> 
        <label for="username">User Name :</label>
        <input type="text" name="username" id="username" /> 
        <label for="password">Password :</label> <input type="password" name="password" id="password" /> 
        <button type="button" value="Login" id="submit">SUBMIT</button>
      </form>
    </div>
  </div>
</body>

JavaScript

$(document).ready(function () {

$('#submit').click(function(){
    validate();   
});

function validate() {
  user = $("#username").val();
  pass = $("#password").val();
  if (user == "user1" && pass == "user1") {
    alert("Login successfully");
    window.location = "other/page.html";
    return false;
  } else if (user == "" && pass == "") {
    alert("User Name or Password cannot be empty");
  } else {
    alert("Wrong User Name or Password");
  }
}

});