Skip to content

Commit bc06289

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #120 from siddhi-244/form
Add Form validation in js.
2 parents 190d4e8 + 4405884 commit bc06289

File tree

4 files changed

+280
-0
lines changed

4 files changed

+280
-0
lines changed

‎form-validation/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
### Form Validation
2+
A basic login form with validations!
3+
4+
### Use of the Project:
5+
We can add this login form at start of any website to verify deatils.
6+
7+
### Tech Stack
8+
* HTML5
9+
* CSS3
10+
* JAVASCRIPT
11+
* REGEX
12+
13+
#### Steps to Use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- Start validatibg!!!
26+
27+
---
28+
29+
### Screenshots
30+
![form](https://user-images.githubusercontent.com/69195262/124592981-b7bea380-de7b-11eb-8b60-38ec0d71c554.png)

‎form-validation/index.html

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