Skip to content

Commit eab861a

Browse files
AkashKobalAkashKobal
authored
Merge pull request #18 from AkashKobal/AkashKobal-patch-13
Update README.md
2 parents ec22462 + a440705 commit eab861a

File tree

1 file changed

+129
-0
lines changed

1 file changed

+129
-0
lines changed

‎15. Form Validation/README.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,131 @@
11
# Form validation _(HTML, CSS, Js)_
22
![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png)
3+
4+
## _HTML_
5+
```html
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
9+
<head>
10+
<meta charset="UTF-8">
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12+
<title>Form validation</title>
13+
<link rel="stylesheet" href="style.css">
14+
<script src="script.js"></script>
15+
</head>
16+
17+
<body>
18+
<form class="colorful-form">
19+
<div class="form-group">
20+
<label class="form-label" for="name">Name:</label>
21+
<input required placeholder="Enter your name" class="form-input" type="text">
22+
</div>
23+
<div class="form-group">
24+
<label class="form-label" for="email">Email:</label>
25+
<input required placeholder="Enter your email" class="form-input" name="email" id="email" type="email">
26+
</div>
27+
<div class="form-group">
28+
<label class="form-label" for="email">Phone no:</label>
29+
<input required placeholder="Enter your phone no" class="form-input" name="email" id="phoneNo" type="number">
30+
</div>
31+
<div class="form-group">
32+
<label class="form-label" for="message">Message:</label>
33+
<textarea required placeholder="Enter your message upto 250 characters." class="form-input" name="message"
34+
id="message"></textarea>
35+
</div>
36+
<button class="form-button" type="submit" onclick="phoneNumber()">Submit</button>
37+
</form>
38+
</body>
39+
</html>
40+
```
41+
42+
## _Javascript_
43+
```js
44+
let name = document.getElementById("name");
45+
let email = document.getElementById("email");
46+
let phoneNo = document.getElementById("phoneNo");
47+
let message = document.getElementById("message");
48+
49+
function phoneNumber() {
50+
let phoneNoLength = phoneNo.value;
51+
if (phoneNoLength.length > 10 || phoneNoLength.length < 10) {
52+
alert("Invalid phone number");
53+
}
54+
else if (phoneNo.type !== "number") {
55+
alert("Invalid phone number");
56+
}
57+
else {
58+
textArea();
59+
}
60+
}
61+
62+
function textArea() {
63+
let messageLength = message.value;
64+
if (messageLength.length > 250) {
65+
alert("Message should be less than 250 characters");
66+
}
67+
}
68+
```
69+
## _CSS_
70+
```css
71+
.colorful-form {
72+
max-width: 400px;
73+
margin: 0 auto;
74+
padding: 20px;
75+
background-color: #f5f5f5;
76+
border-radius: 10px;
77+
78+
}
79+
80+
.form-group {
81+
margin-bottom: 20px;
82+
}
83+
84+
.form-label {
85+
display: block;
86+
font-weight: bold;
87+
margin-bottom: 5px;
88+
color: #333;
89+
}
90+
91+
.form-input {
92+
width: 100%;
93+
padding: 10px;
94+
border: none;
95+
background-color: #fff;
96+
color: #333;
97+
border-radius: 5px;
98+
}
99+
100+
textarea.form-input {
101+
height: 100px;
102+
}
103+
104+
.form-button {
105+
display: block;
106+
width: 100%;
107+
padding: 10px;
108+
background-color: #ff6f69;
109+
color: #fff;
110+
border: none;
111+
border-radius: 5px;
112+
cursor: pointer;
113+
transition: background-color 0.3s ease;
114+
}
115+
116+
.form-button:hover {
117+
background-color: #ff5f59;
118+
}
119+
120+
.colorful-form {
121+
max-width: 420px;
122+
margin: 0 auto;
123+
padding: 25px;
124+
background-color: #f5f5f5;
125+
border-radius: 10px;
126+
left: 50%;
127+
margin-top: 250px;
128+
padding-right: 40px;
129+
}
130+
```
131+

0 commit comments

Comments
 (0)