create validation on the login form
in the object, I have to add validation to the login form I created.
I created a form structure using (HTML).
HTML code:- (loginform.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<form id="form" action="#" class="form-login" >
<div>
<div class="input">
<input type="text" id="email" placeholder="Email or Phone Number">
</div>
<div id="emailerror">
</div>
<div class="input">
<input type="password" id="password" placeholder="Password">
</div>
<div id="passerror">
</div>
</div>
<div class="login-button" onclick="check_empty();">
<button class="button"><b>Log In</b></button>
</div>
<div class="forget-account">
<a href="#">Forget Password?</a>
</div>
<div class="hr"></div>
<div class="create-account">
<b>Create New Account</b>
</div>
</form>
</div>
</body>
</html>
Second I create a stylesheet (style.css).
body{
background: #f0f2f5;
}
.container{
margin: 100px auto;
text-align: center;
width: 396px;
background: #fff;
border-radius: 8px;
float: none;
color: #1c1e21;
padding-bottom: 24px;
padding-top: 10px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
.form-login{
margin: 0;
padding: 0;
display: block;
}
div{
display: block;
}
input{
background: #fff;
color: #1c1e21;
font-size: 17px;
padding: 14px 16px;
width: 330px;
border-radius: 6px;
border: 1px solid #dddfe2;
color: #1d2129;
margin-top: 16px;
}
.button{
background: #1877f2;
border: none;
border-radius: 6px;
font-size: 22px;
line-height: 48px;
padding: 0 16px;
width: 364px;
cursor: pointer;
display: inline-block;
text-decoration: none;
white-space: nowrap;
color: #fff;
margin-top: 16px;
}
.forget-account{
margin-top: 16px;
}
.forget-account a{
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #1877f2;
}
.hr{
align-items: center;
border-bottom: 1px solid #dadde1;
display: flex;
margin: 20px 16px;
text-align: center;
}
.create-account{
border: none;
border-radius: 6px;
font-size: 17px;
line-height: 48px;
padding: 0 16px;
display: inline-block;
background: #42b72a;
color: #fff;
}
#emailerror{
color: #f02849;
font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 16px;
margin-top: 8px;
text-align: left;
padding: 0 16px;
}
#emailerror a{
align-items: center;
color: #f02849;
font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
text-decoration: none;
}
#passerror{
color: #f02849;
font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 16px;
margin-top: 8px;
text-align: left;
padding: 0 16px;
}
#passerror a{
align-items: center;
color: #f02849;
font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
text-decoration: none;
}
Third I create a script to validate login (script.js):-
function check_empty(){
var txt = "";
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if (email == ""){
txt = 'The email or mobile number you entered isn’t connected to an account. <a href="" ><b>Find your account and log in.</b></a>';
document.getElementById('emailerror').innerHTML = txt;
}
if (password == ""){
txt = 'The email or mobile number you entered isn’t connected to an account. <a href="" ><b>Find your account and log in.</b></a>';
document.getElementById("passerror").innerHTML = txt;
}
}
Thanks For Reading
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Comments
Post a Comment