Skip to content

Commit ca534c6

Browse files
AkashKobalAkashKobal
committed
form validation
1 parent fbcbe96 commit ca534c6

File tree

18 files changed

+226
-0
lines changed

18 files changed

+226
-0
lines changed

‎16. Form Validation 2/Screenshot (327).png‎

36.2 KB
Loading

‎16. Form Validation 2/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Form Validation</title>
8+
<link rel="stylesheet" href="style.css"></link>
9+
<script defer src="script.js"></script>
10+
</head>
11+
12+
<body>
13+
<div class="form-box">
14+
<form class="form" onsubmit="return formValidator()">
15+
<span class="title">Sign up</span>
16+
<span class="subtitle">Create a free account with your email.</span>
17+
<div class="form-container">
18+
<input type="text" class="input" placeholder="First Name" id="firstname">
19+
<input type="text" class="input" placeholder="Last Name" id="lastname">
20+
<input type="email" class="input" placeholder="Email" id="email">
21+
<input type="password" class="input" placeholder="Password" id="pass">
22+
<textarea name="" id="" cols="30" rows="3" id="addr" placeholder="Address"></textarea>
23+
<input type="number" class="input" placeholder="Mobile number" id="mobileno">
24+
</div>
25+
<button type="submit">Sign up</button>
26+
</form>
27+
<div class="form-section">
28+
<p>Have an account? <a href="">Log in</a> </p>
29+
</div>
30+
</div>
31+
32+
</body>
33+
34+
</html>

‎16. Form Validation 2/script.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
function formValidator() {
2+
// Make quick references to our fields
3+
var firstname = document.getElementById('firstname');
4+
var lastname = document.getElementById('lastname');
5+
var email = document.getElementById('email');
6+
var pass = document.getElementById('pass');
7+
var addr = document.getElementById('addr');
8+
var mobileno = document.getElementById('mobileno');
9+
// Check each input in the order that it appears in the form!
10+
if (notEmpty(firstname, "first name can not be empty")) {
11+
if (isAlphabet(firstname, "Please enter only letters for your Firstname")) {
12+
if (lengthRestriction(firstname, 6)) {
13+
if (isAlphabet(lastname, "Please enter only letters for your Lastname")) {
14+
if (emailValidator(email, "Please enter a valid email address")) {
15+
if (lengthRestriction(pass, 6)) {
16+
if (isAlphanumeric(pass, "please enter Numbers and Letters Only for password")) {
17+
if (notEmpty(addr, "please enter the address")) {
18+
if (isNumeric(mobileno, "Please enter a valid mobileno")) {
19+
if (lengthRestriction1(mobileno, 10, 10)) {
20+
return true;
21+
}
22+
}
23+
}
24+
}
25+
}
26+
}
27+
}
28+
}
29+
}
30+
}
31+
return false;
32+
}
33+
function notEmpty(elem, helperMsg) {
34+
if (elem.value.length == 0) {
35+
alert(helperMsg);
36+
elem.focus(); // set the focus to this input
37+
return false;
38+
}
39+
return true;
40+
}
41+
function isNumeric(elem, helperMsg) {
42+
var numericExpression = /^[0-9]+$/;
43+
if (elem.value.match(numericExpression)) {
44+
return true;
45+
} else {
46+
alert(helperMsg);
47+
elem.focus();
48+
return false;
49+
}
50+
}
51+
function isAlphabet(elem, helperMsg) {
52+
var alphaExp = /^[a-zA-Z]+$/;
53+
if (elem.value.match(alphaExp)) {
54+
return true;
55+
} else {
56+
alert(helperMsg);
57+
elem.focus();
58+
return false;
59+
}
60+
}
61+
function isAlphanumeric(elem, helperMsg) {
62+
var alphaExp = /^[0-9a-zA-Z]+$/;
63+
if (elem.value.match(alphaExp)) {
64+
return true;
65+
} else {
66+
alert(helperMsg);
67+
elem.focus();
68+
return false;
69+
}
70+
}
71+
function lengthRestriction(elem, min) {
72+
var uInput = elem.value;
73+
if (uInput.length >= min) {
74+
return true;
75+
} else {
76+
alert("Please enter minimum " + min + " characters");
77+
elem.focus();
78+
return false;
79+
}
80+
}
81+
function emailValidator(elem, helperMsg) {
82+
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
83+
if (elem.value.match(emailExp)) {
84+
return true;
85+
}
86+
else {
87+
alert(helperMsg);
88+
elem.focus();
89+
return false;
90+
}
91+
}
92+
function lengthRestriction1(elem, min, max) {
93+
var uInput = elem.value;
94+
if (uInput.length >= min && uInput.length <= max) {
95+
return true;
96+
}
97+
else {
98+
alert("Please enter 10 numbers only");
99+
elem.focus();
100+
return false;
101+
}
102+
}

‎16. Form Validation 2/style.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.form-box {
2+
max-width: 300px;
3+
background: #f1f7fe;
4+
overflow: hidden;
5+
border-radius: 16px;
6+
color: #010101;
7+
}
8+
9+
.form {
10+
position: relative;
11+
display: flex;
12+
flex-direction: column;
13+
padding: 32px 24px 24px;
14+
gap: 16px;
15+
text-align: center;
16+
}
17+
18+
/*Form text*/
19+
.title {
20+
font-weight: bold;
21+
font-size: 1.6rem;
22+
}
23+
24+
.subtitle {
25+
font-size: 1rem;
26+
color: #666;
27+
}
28+
29+
/*Inputs box*/
30+
.form-container {
31+
overflow: hidden;
32+
border-radius: 8px;
33+
background-color: #fff;
34+
margin: 1rem 0 .5rem;
35+
width: 100%;
36+
}
37+
38+
.input {
39+
background: none;
40+
border: 0;
41+
outline: 0;
42+
height: 40px;
43+
width: 100%;
44+
border-bottom: 1px solid #eee;
45+
font-size: .9rem;
46+
padding: 8px 15px;
47+
}
48+
49+
.form-section {
50+
padding: 16px;
51+
font-size: .85rem;
52+
background-color: #e0ecfb;
53+
box-shadow: rgb(0 0 0 / 8%) 0 -1px;
54+
}
55+
56+
.form-section a {
57+
font-weight: bold;
58+
color: #0066ff;
59+
transition: color .3s ease;
60+
}
61+
62+
.form-section a:hover {
63+
color: #005ce6;
64+
text-decoration: underline;
65+
}
66+
67+
/*Button*/
68+
.form button {
69+
background-color: #0066ff;
70+
color: #fff;
71+
border: 0;
72+
border-radius: 24px;
73+
padding: 10px 16px;
74+
font-size: 1rem;
75+
font-weight: 600;
76+
cursor: pointer;
77+
transition: background-color .3s ease;
78+
}
79+
80+
.form button:hover {
81+
background-color: #005ce6;
82+
}
83+
84+
.form-box {
85+
position: absolute;
86+
left: 50%;
87+
top: 50%;
88+
transform: translate(-50%, -50%);
89+
/* width: 00px; */
90+
}

16. Image Gallery/Screenshot (325).png renamed to 17. Image Gallery/Screenshot (325).png

File renamed without changes.

16. Image Gallery/images/i1.jpg renamed to 17. Image Gallery/images/i1.jpg

File renamed without changes.

16. Image Gallery/images/i10.jpg renamed to 17. Image Gallery/images/i10.jpg

File renamed without changes.

16. Image Gallery/images/i2.jpg renamed to 17. Image Gallery/images/i2.jpg

File renamed without changes.

16. Image Gallery/images/i3.jpg renamed to 17. Image Gallery/images/i3.jpg

File renamed without changes.

16. Image Gallery/images/i4.jpg renamed to 17. Image Gallery/images/i4.jpg

File renamed without changes.

0 commit comments

Comments
 (0)