jQuery Hands-on 2 - Login Page

Fill In The Blank
Views 471

Answer:

1. jQuery Hands-on 2 - Login Page

Write a function login() that will read the username and password from the text boxes IDs #username, #password, and validate them.

For username="admin" and password= "password", create an alert box "You are a valid user", or "You are not a valid user".

index.html 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
   
    
</head>
<body>

<div class="login-page">
  <div class="form">
    
      <input type="text" id="username" placeholder="username"/>
      <input type="password" id="password" placeholder="password"/>
      <button id="login" type="button" onclick="login()">Login</button></br>
   
  </div> 
</div>
 
    
</body>
</html>
script.js 

function login() {
   
      
};
script.js

Here is the implementation of the login function in JavaScript: 


 function login() {
  var username = $("#username").val();
  var password = $("#password").val();
  
  if (username == "admin" && password == "password") {
    alert("You are a valid user");
  } else {
    alert("You are not a valid user");
  }
};

Related Articles:

This section is dedicated exclusively to Questions & Answers. For an in-depth exploration of jQuery, click the links and dive deeper into this subject.

Go to Question List

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF