Skip to content

Commit 2d24c8e

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request #60 from ShwetKhatri/main
Added a Modern Coding Registration-Form with JavaScript Validations
2 parents 098d527 + e646de3 commit 2d24c8e

4 files changed

Lines changed: 435 additions & 0 deletions

File tree

‎Form-Validation/codding form styles.css‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing:border-box;
5+
}
6+
7+
8+
:root{
9+
--myfont : 'Mulish', sans-serif;
10+
--my-btn-font : 'Montserrat' , sans-serif;
11+
--lg-lightcolor: linear-gradient(to left , rgba(116,235,213,0.6), rgba(159, 172, 230,0.5));
12+
--lg-color: linear-gradient(to left, #74ebdf , #9face6);
13+
14+
}
15+
16+
body{
17+
18+
background-image: url("formimage.jpg");
19+
background-color: #4da6ff;
20+
background-size:100%;
21+
background-repeat: no-repeat;
22+
font-family: var(--myfont);
23+
display:flex;
24+
align-items: center;
25+
justify-content: center;
26+
min-height:100vh;
27+
width:100vw;
28+
}
29+
30+
.container{
31+
background-color:#fff;
32+
border-radius : 10px;
33+
-webkit-border-radius:10px;
34+
box-shadow : 0 2.8px 2.2px rgba(0,0,0,0.340),0 6.7px 5.3px rgba(0,0,0,0.480);
35+
overflow:hidden;
36+
width: calc(100vw - 65vw);
37+
max-width : 100%;
38+
}
39+
40+
.header{
41+
background:var(--lg-color);
42+
padding:30px 0;
43+
}
44+
45+
.header h2{
46+
color:#222;
47+
font-family: var(--my-btn-font);
48+
font-size:24px;
49+
text-transform: uppercase;
50+
text-align:center;
51+
}
52+
53+
54+
.form{
55+
padding:30px 40px;
56+
}
57+
58+
.form-control{
59+
margin-bottom: 15px;
60+
position:relative;
61+
}
62+
63+
.box{
64+
position : relative;
65+
}
66+
67+
.box input{
68+
width:16px;height:16px;
69+
margin-top:5px;
70+
}
71+
72+
.box label{
73+
font-size: 15px;
74+
}
75+
76+
.form-control label{
77+
display: inline-block;
78+
margin-bottom:5px;
79+
font-size:15px;
80+
}
81+
82+
.form-control input{
83+
width: 100%;
84+
border:2px solid #f0f0f0;
85+
border-radius:5px;
86+
display:block;
87+
font-family:var(--myfont);
88+
font-size:14px;
89+
padding:9px;
90+
}
91+
92+
.form-control input:focus{
93+
outline: 0;
94+
border-color : #777;
95+
}
96+
97+
.form-control.success input{
98+
border-color: #2ecc71;
99+
}
100+
101+
.form-control.error input{
102+
border-color: #e74c3c;
103+
}
104+
105+
.form-control i{
106+
position: absolute;
107+
right:12px;
108+
top:38px;
109+
visibility: hidden;
110+
}
111+
112+
113+
.form-control.success i.fa-check-circle{
114+
color: #2ecc71;
115+
visibility:visible;
116+
}
117+
118+
.form-control.error i.fa-exclamation-circle{
119+
color:#e74c3c;
120+
visibility:visible;
121+
}
122+
123+
.form-control small{
124+
color:#e74c3c;
125+
position: absolute;
126+
left:0;
127+
visibility: hidden;
128+
}
129+
130+
.form-control.error small{
131+
visibility:visible;
132+
}
133+
134+
.box small{
135+
color:#e74c3c;
136+
position: absolute;
137+
left:0;
138+
top:100%;
139+
visibility: visible;
140+
}
141+
142+
143+
.form .btn{
144+
background: var(--lg-color);
145+
border-radius: 6px;
146+
border:none;
147+
outline:none;
148+
color:#fff;
149+
display: block;
150+
font-family : var(--my-btn-font);
151+
font-size : 16px;
152+
padding:15px 0;
153+
margin-top: 20px;
154+
width: 100%;
155+
font-weight : bold;
156+
text-transform: uppercase;
157+
transition: all 1s ease;
158+
}
159+
160+
161+
.form .btn:hover{
162+
background: linear-gradient(to right, #74ebd5, #9face6);
163+
}
164+
165+
@media (min-width:501px) and (max-width:998px){
166+
.container{
167+
width: calc(100vw - 40vw);
168+
max-width:100%;
169+
}
170+
}
171+
172+
@media (max-width:500px){
173+
.container{
174+
width: calc(100vw - 20vw);
175+
max-width:100%;
176+
}
177+
}
178+

‎Form-Validation/codding form.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title> Form Validation </title>
5+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
6+
<link href="codding form styles.css" type= "text/css" rel="stylesheet">
7+
</head>
8+
<body>
9+
10+
<div class="container">
11+
<div class="header">
12+
<h2>CODING BUDDIES REGISTRATION FORM</h2>
13+
</div>
14+
<form class="form" id="form">
15+
<div class="form-control">
16+
<label>Username</label>
17+
<input type="text" name="username" id="username" placeholder="Enter Your Username" autocomplete="off" onkeyup="validateusername(this.value)">
18+
<i class="fas fa-check-circle"></i>
19+
<i class="fas fa-exclamation-circle"></i>
20+
<small> Error Msg </small>
21+
</div>
22+
<div class="form-control">
23+
<label>Email</label>
24+
<input type="email" name="email" id="email" placeholder="Enter Your Email" autocomplete="off" onkeyup="validateemail(this.value)">
25+
<i class="fas fa-check-circle"></i>
26+
<i class="fas fa-exclamation-circle"></i>
27+
<small> Error Msg </small>
28+
</div>
29+
<div class="form-control">
30+
<label>School / College / Organization name</label>
31+
<input type="text" name="institute" id="institute" placeholder="Enter name accordingly" autocomplete="off"
32+
onkeyup="validatecollegename(this.value)">
33+
<i class="fas fa-check-circle"></i>
34+
<i class="fas fa-exclamation-circle"></i>
35+
<small> Error Msg </small>
36+
</div>
37+
<div class="form-control">
38+
<label>Phone Number</label>
39+
<input type="number" name="phone" id="phone" placeholder="Enter Your Phone Number" autocomplete="off" onkeyup="validatephone(this.value)">
40+
<i class="fas fa-check-circle"></i>
41+
<i class="fas fa-exclamation-circle"></i>
42+
<small> Error Msg </small>
43+
</div>
44+
<div class="form-control">
45+
<label>Password</label>
46+
<input type="password" name="password" id="password" placeholder="Enter Your Password" autocomplete="off" onkeyup="validatepassword(this.value)">
47+
<i class="fas fa-check-circle"></i>
48+
<i class="fas fa-exclamation-circle"></i>
49+
<small> Error Msg </small>
50+
</div>
51+
<div class="form-control">
52+
<label>Retype Password</label>
53+
<input type="password" name="cnfpassword" id="cnfpassword" placeholder="Enter Your Password again" autocomplete="off"
54+
onkeyup="validatecnfpass(this.value)">
55+
<i class="fas fa-check-circle"></i>
56+
<i class="fas fa-exclamation-circle"></i>
57+
<small> Error Msg </small>
58+
</div>
59+
<div class="box">
60+
<input type="checkbox" name="terms" id="terms" onchange="validatecheckbox(this)">
61+
<label for="terms"> I have read all the Terms and Conditions</label>
62+
<small> Agree to Terms & Conditions checkbox </small>
63+
</div>
64+
65+
<input type="submit" class="btn" value="Submit" name="submit" >
66+
67+
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
68+
<script src="codeform.js"></script>
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)