How to make sign Up form using javascript with password validation.
with password validation..
source code here ..
Css...
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
padding: 40px;
line-height: 30px;
}
input {
margin: 20px 0px;
}
form {
width: 30%;
margin: 0 auto;
padding: 10px;
background: rgb(255 255 255);
border-radius: 10px;
box-shadow: 0px 8px 63px 32px #a9a9a917;
}
.loginform{
display:none;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
..................................................................................
INDEX.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">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" class="sginupform">
<h1>Sgin Up</h1>
<div class="form-group">
<input type="text" placeholder="Type Your Name" id="name" class="form-control">
<input type="text" placeholder="Type Your Email" id="email" class="form-control">
<input type="password" placeholder="Type Your password" id="pass" class="form-control">
<a class="btn btn-success">SginUp</a>
</div>
</form>
<form action="" class="loginform">
<h1>Log In </h1>
<p class="info"></p>
<input type="text" placeholder="Type Your Email" id="logemail" class="form-control">
<input type="password" name="" id="logpass" class="form-control" required="required" placeholder="Type Your Pass.." title="">
<a class="btn btn-success login">LogIn</a>
</form>
<script src="app.js"></script>
</body>
</html>
....................................................................................
javaScript..
//FORM EMAIL PASSWORD SUBMITAION
var btn = document.querySelector('.btn').addEventListener('click', function() {
//CREATE BLANK ARREY
var data = [];
//ACCESS NAME VALUE
var name = document.getElementById('name').value;
//ACCESS EMAIL VALUE
var email = document.getElementById('email').value;
//ACCESS PASS VALUE
var pass = document.getElementById('pass').value;
//console.log(name);
//ADD VALUES IN ARREY OBJECTS
data.push({ name: name, email: email, pass: pass });
document.querySelector('.sginupform').style.display = "none";
document.querySelector('.loginform').style.display = "block";
//CREATE LOOP FOR ACCESS ALL PROPERTIES OF ARREY OBJECTS
for (var i in data) {
//ACCESS LOGIN BUTTON AND ADD ONCLICK EVENT
var login = document.querySelector('.login').addEventListener("click", () => {
//ACCESS LOGIN PASS VALUE
var logpass = document.getElementById('logpass').value;
//ACCESS LOGIN EMAIL VALUE
var logemail = document.getElementById('logemail').value;
//GIVE CONDITIONS FOR MATCH IPUT LOGIN INPUT VALUES TO ARREY VALUE
if (logemail == data[i].email && logpass == data[i].pass) {
document.querySelector('.info').innerHTML = "<p class='correct'>Your Are LogIn Successfully</p>";
} else {
document.querySelector('.info').innerHTML = "<p class='incorrect'>Your Email or Password is inccorect</p>";
}
});
}
});
...................................
0 comments: