<html>
<head>
<link
rel="stylesheet" type="text/css"
href="style.css">
<script
type="text/javascript" src="first.js"></script>
</head>
<body>
<form
id="form_id" method="post" name="myform">
<center>
<h2>Javascript
Login Form Validation</h2>
<table
height="200" width="300" border="1">
<tr>
<td>User
Name :</td>
<td><input
type="text" name="username" id="username"
placeholder="Ener Username" />
</td>
</tr>
<tr>
<td>Password
:</td>
<td><input
type="password" name="password" id="password"
placeholder="Ener Password" ></td>
</tr>
<tr>
<td></td>
<td><!--<input
type="button" class="button button1"
value="Login" id="submit" onclick="validate();"
/>-->
<button
class="button button1" onclick="validate();">Login1</button></td>
</tr>
</table>
</center>
</form>
</html>
</body>
first.js
function
validate()
{
var
username = document.getElementById("username").value;
var
password = document.getElementById("password").value;
if
(username == null || username == "")
{
alert("Please
enter the username.");
return
false;
}
if
(password == null || password == "")
{
alert("Please
enter the password.");
return
false;
}
if(username==password)
{
alert("Login
successful ");
setTimeout(function()
{window.location = "one.html" });
}
else
{
alert("username
an password is not match");
}
}
Style.css
body
{
background-color: skyblue;
font-family: "Open Sans";
font-size: 14px;
}
h2{
color: red;
margin-left: 20px;
}
form
{
padding: 20px;
background: #2c3e50;
border-radius: 4px;
}
form
input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1
{
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover
{
background-color: #4CAF50;
color: white;
}
