Skip to content

Commit 55cee59

Browse files
committed
Form Validation
1 parent 2976a2a commit 55cee59

2 files changed

Lines changed: 163 additions & 0 deletions

File tree

Form Validation/index.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
<h1>This is Heading</h1>
12+
<h2>Registration Form</h2>
13+
<p>Please fill in this form to create an account.</p>
14+
15+
<form class="form" onsubmit="validateForm()">
16+
17+
18+
<label for="name">Name</label>
19+
<input type="text" class="name1" id="name" name="name" placeholder="Enter your name" >
20+
<br><br>
21+
<label for="email">Email</label>
22+
<input type="text" class="email1" id="email" name="email" placeholder="Enter your email" >
23+
<br><br>
24+
25+
<label for="phone">Phone</label>
26+
<input type="tel" class="phone1" id="phone" name="phone" placeholder="Enter your phone number">
27+
<br><br>
28+
<label for="password">Password</label>
29+
<input type="password" class="pass1" id="password" name="password" placeholder="Enter your password">
30+
<br><br>
31+
<label for="confirm-password">Confirm Password</label>
32+
<input type="password" class="conpass1" id="confirm-password" name="confirm-password" placeholder="Confirm your password">
33+
<br><br>
34+
35+
<submit type="submit" value="Submit">
36+
<input type="submit" value="Submit">
37+
38+
</form>
39+
40+
<script>
41+
42+
function validateForm(){
43+
var name=document.getElementById("name").value;
44+
var email=document.getElementById("email").value;
45+
var phone=document.getElementById("phone").value;
46+
var password=document.getElementById("password").value;
47+
var confirmPassword=document.getElementById("confirm-password").value;
48+
49+
var phoneregex=/^\+?[1-9][0-9]{7,14}$/;
50+
51+
var emailregex= /^\S+@\S+\.\S+$/;
52+
53+
if(name===""||email===""||phone===""||password===""||confirmPassword===""){
54+
alert("All fields are required");
55+
return false;
56+
57+
}
58+
59+
if(!emailregex.test(email)){
60+
alert("Please enter a valid email address");
61+
return false;
62+
}
63+
64+
if(!phoneregex.test(phone)){
65+
alert("Please enter a valid phone number");
66+
return false;
67+
}
68+
69+
if(password.length<6){
70+
alert("Password must be at least 6 characters long");
71+
return false;
72+
}
73+
74+
if(password!==confirmPassword){
75+
alert("Passwords do not match");
76+
return false;
77+
}
78+
79+
alert("Form submitted successfully!");
80+
return true;
81+
82+
83+
84+
85+
86+
87+
88+
89+
90+
91+
92+
93+
}
94+
</script>
95+
96+
</body>
97+
</html>

Form Validation/style.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
h1{
2+
text-align: center;
3+
}
4+
5+
.form{
6+
7+
display: flex;
8+
justify-content: center;
9+
align-items: middle;
10+
flex-direction: column;
11+
margin-top: 20px;
12+
}
13+
14+
15+
.email1{
16+
width: 300px;
17+
height: 30px;
18+
margin-bottom: 10px;
19+
padding: 5px;
20+
border-radius: 5px;
21+
border: 1px solid #ccc;
22+
}
23+
24+
.name1{
25+
width: 300px;
26+
height: 30px;
27+
margin-bottom: 10px;
28+
padding: 5px;
29+
border-radius: 5px;
30+
border: 1px solid #ccc;
31+
}
32+
33+
.password1{
34+
width: 300px;
35+
height: 30px;
36+
margin-bottom: 10px;
37+
padding: 5px;
38+
border-radius: 5px;
39+
border: 1px solid #ccc;
40+
}
41+
42+
.phone1{
43+
width: 300px;
44+
height: 30px;
45+
margin-bottom: 10px;
46+
padding: 5px;
47+
border-radius: 5px;
48+
border: 1px solid #ccc;
49+
}
50+
51+
.conpass1{
52+
width: 300px;
53+
height: 30px;
54+
margin-bottom: 10px;
55+
padding: 5px;
56+
border-radius: 5px;
57+
border: 1px solid #ccc;
58+
}
59+
.pass1{
60+
width: 300px;
61+
height: 30px;
62+
margin-bottom: 10px;
63+
padding: 5px;
64+
border-radius: 5px;
65+
border: 1px solid #ccc;
66+
}

0 commit comments

Comments
 (0)