Html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="formbox">
<table>
<tr> <td style="width:30px">Email </td> <td> <input type="text" id="email" onChange="checkemail()" style="border-radius:20px 20px 20px 20px;height:35px;width:200px"/> </td> <td> <span id="emailerror"> </span> </td> </tr>
<tr> <td>Password </td> <td> <input type="password" id="pwd" onChange="checkPASSWORDLENGTH()" style="border-radius:20px 20px 20px 20px;height:35px;width:200px"/> </td> <td> <span id="pwderror"> </span> </td> </tr>
<tr> <td>Confirm Password </td> <td> <input type="password" id="cpwd" onChange="confrimpassword()" style="border-radius:20px 20px 20px 20px;height:35px;width:200px"/> </td> <td> <span id="cpwderror"> </span> </td> </tr>
<tr>
<td>
</td>
<td>
<button> Submit!</button>
</td>
</tr>
</table>
</div>
</div>
<script src="js/js.js"> </script>
</body>
</html>
css code:
@charset "utf-8";
/* CSS Document */
body
{ margin:0 auto;
padding:0px;
}
#wrapper
{ width:100%;
height:1000px;
background-image:url(../img/login.jpg);
background-size:100% 1000px;
}
#formbox
{ width:500px;
height:300px;
background-color:rgba(243, 242, 242,0.4);
position:absolute;
margin-left:300px;
margin-top:300px;
}
td
{ padding:15px;
}
Js code:
// JavaScript Document
function checkemail()
{
var c=document.getElementById("email").value;
var pos=c.search("@");
if(pos==-1)
{
document.getElementById("emailerror").innerHTML="Invalid Email Id";
document.getElementById("emailerror").style.color="red";
}
else
{
var domainname=c.substring(pos+1);
var d= domainname.toLowerCase();
if(d!=="yahoo.com")
{
document.getElementById("emailerror").innerHTML="use correct domain name like yahoo.com";
document.getElementById("emailerror").style.color="red";
}
else
{
document.getElementById("emailerror").innerHTML="valid Email Id";
document.getElementById("emailerror").style.color="green";
}
}
}
function checkPASSWORDLENGTH()
{
var c=document.getElementById("pwd").value;
var l=c.length;
if(l<8 || l>15)
{
document.getElementById("pwderror").innerHTML="Password should contain atleast 8 characters!";
document.getElementById("pwderror").style.color="red";
}
else
{
document.getElementById("pwderror").innerHTML="valid Password ";
document.getElementById("pwderror").style.color="green";
}
}
function confrimpassword()
{
var pwd=document.getElementById("pwd").value;
var cpwd=document.getElementById("cpwd").value;
if(pwd!==cpwd)
{
document.getElementById("cpwderror").innerHTML="Password Mismatch";
document.getElementById("cpwderror").style.color="red";
}
else
{
document.getElementById("cpwderror").innerHTML="Password match";
document.getElementById("cpwderror").style.color="green";
}
}
