JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form_id" method="post" name="myform">
  <label>User Name :</label>
  <input type="text" placeholder="Enter username" name="username" id="username"/>
  <label>Password :</label>
  <input type="password" placeholder="Enter Password" name="password" id="password"/>
  <input type="button" value="Login" id="submit" onclick="validate()"/>
</form>

JavaScript

function validate()
    {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        var Userlist = [{"username":"asdf", "password":"123"}, {"username":"zxc", "password":"123"}];
        var logged = false;

        for (var i=0; i < Userlist.length; i++) {
          if ( username == Userlist[i].username && password == Userlist[i].password)
              logged=true;
        }

        if(logged)
          	alert ("Login successfully");
        else
          	alert("Invalid username and password");
    }