Skip to content

Commit 6a2d8f7

Browse files
siddhi-244siddhi-244
authored
added form validation
1 parent eee8e4e commit 6a2d8f7

File tree

3 files changed

+246
-0
lines changed

3 files changed

+246
-0
lines changed

‎form-validation/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="header">
11+
<h2>CREATE ACCOUNT</h2>
12+
</div>
13+
<form class="form" id="form">
14+
<div class="form-control ">
15+
<label >Username</label>
16+
<input type="text" placeholder="beautyndbeast" id="username">
17+
<i class="fas fa-check-circle"></i>
18+
<i class="fas fa-exclamation-circle"></i>
19+
<small>Error Message</small>
20+
</div>
21+
<div class="form-control ">
22+
<label >Email</label>
23+
<input type="email" placeholder="[email protected]" id="email">
24+
<i class="fas fa-check-circle"></i>
25+
<i class="fas fa-exclamation-circle"></i>
26+
<small>Error Message</small>
27+
</div>
28+
<div class="form-control">
29+
<label >Password</label>
30+
<input type="password" placeholder="password nahi batate " id="password">
31+
<i class="fas fa-check-circle"></i>
32+
<i class="fas fa-exclamation-circle"></i>
33+
<small>Error Message</small>
34+
</div>
35+
<div class="form-control">
36+
<label >Confirm Password</label>
37+
<input type="password" placeholder="yeh bhi nahi batate " id="confirm">
38+
<i class="fas fa-check-circle"></i>
39+
<i class="fas fa-exclamation-circle"></i>
40+
<small>Error Message</small>
41+
</div>
42+
<button>Submit</button>
43+
</form>
44+
</div>
45+
<script type="text/javascript" src="script.js"></script>
46+
47+
</body>
48+
</html>

‎form-validation/script.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const form=document.getElementById("form");
2+
const username=document.getElementById("username");
3+
const email=document.getElementById("email");
4+
const password=document.getElementById("password");
5+
const confirm=document.getElementById("confirm");
6+
form.addEventListener("submit",(e)=>{
7+
e.preventDefault();
8+
checkInputs();
9+
});
10+
function checkInputs(){
11+
// to prevent from spaces we use trim
12+
const usernamevalue=username.value.trim();
13+
const emailvalue=email.value.trim();
14+
const passwordvalue=password.value.trim();
15+
const confirmvalue=confirm.value.trim();
16+
if(usernamevalue === ''){
17+
// add error class
18+
setError(username,"This field cannot be blank !!!!!!");
19+
20+
}
21+
else{
22+
// add success class
23+
setSuccess(username);
24+
25+
}
26+
if(emailvalue === ''){
27+
// add error class
28+
setError(email,"This field cannot be blank !!!!!!");
29+
30+
}
31+
else if (!isemail(emailvalue)){
32+
setError(email,"Check the email dude !!!!!!");
33+
34+
35+
}
36+
else{
37+
// add success class
38+
setSuccess(email);
39+
40+
}
41+
if(passwordvalue === ''){
42+
// add error class
43+
setError(password,"This field cannot be blank !!!!!!");
44+
45+
}else if(passwordvalue.length<=4){
46+
setError(password,"Password is too small!!")
47+
}
48+
else{
49+
// add success class
50+
setSuccess(password);
51+
52+
}
53+
if(confirmvalue === ''){
54+
// add error class
55+
setError(confirm,"This field cannot be blank !!!!!!");
56+
57+
}else if(passwordvalue !== confirmvalue){
58+
setError(confirm,"Dude ! Password and Confirm Password must be same.")
59+
}
60+
else{
61+
// add success class
62+
setSuccess(confirm);
63+
64+
}
65+
}
66+
67+
68+
function setError(input,msg){
69+
const formControl=input.parentElement;
70+
const small=formControl.querySelector("small");
71+
small.innerText=msg;
72+
// add error class
73+
formControl.className="form-control error";
74+
}
75+
function setSuccess(input){
76+
const formControl=input.parentElement;
77+
formControl.className="form-control success";
78+
79+
}
80+
81+
function isemail(email){
82+
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
83+
84+
}

‎form-validation/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
*{
2+
box-sizing: border-box;
3+
}
4+
body{
5+
background-color: #8e89cf;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
min-height: 100vh;
10+
margin: 0;
11+
}
12+
.container{
13+
background-color: #fff;
14+
border-radius: 5px;
15+
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
16+
width: 400px;
17+
max-width: 100%;
18+
overflow: hidden;
19+
}
20+
.header{
21+
background-color: #f7f7f7;
22+
border-bottom: 1px solid #f0f0f0;
23+
padding: 20px 40px;
24+
}
25+
.header h2{
26+
margin: 0;
27+
}
28+
.form{
29+
padding: 30px 40px;
30+
31+
}
32+
.form-control{
33+
margin-bottom: 10px;
34+
padding-bottom: 20px;
35+
position: relative;
36+
}
37+
.form-control label{
38+
display: inline-block;
39+
margin-bottom: 5px;
40+
}
41+
42+
.form-control input{
43+
border:2px solid #f0f0f0;
44+
border-radius: 4px;
45+
display: block;
46+
font-size: 14px;
47+
width:100%;
48+
padding:10px;
49+
50+
}
51+
52+
.form-control i{
53+
position: absolute;
54+
top: 40px;
55+
right: 10px;
56+
visibility: hidden;
57+
}
58+
59+
.form-control small{
60+
position: absolute;
61+
bottom: 0;
62+
left: 0;
63+
visibility: hidden;
64+
}
65+
.form button{
66+
background-color: #8e44fd;
67+
border:2px solid #8e44fd;
68+
color: #fff;
69+
display: block;
70+
padding: 10px;
71+
width:100%;
72+
font-size: 16px;
73+
border-radius: 4px;
74+
}
75+
76+
.form-control.success input{
77+
border-color: #2ecc71;
78+
}
79+
.form-control.error input{
80+
border-color: #e74c3c;
81+
}
82+
.form-control.success i.fa-check-circle{
83+
visibility: visible;
84+
color: #2ecc71;
85+
86+
}
87+
.form-control.error i.fa-exclamation-circle{
88+
visibility: visible;
89+
color: #e74c3c;
90+
91+
}
92+
.form-control.error small{
93+
visibility: visible;
94+
color: #e74c3c;
95+
}
96+
97+
98+
99+
100+
101+
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+

0 commit comments

Comments
 (0)