diff --git a/15. Form Validation/README.md b/15. Form Validation/README.md
index c2c9096..6de6945 100644
--- a/15. Form Validation/README.md
+++ b/15. Form Validation/README.md
@@ -1,2 +1,131 @@
# Form validation _(HTML, CSS, Js)_
![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png)
+
+## _HTML_
+```html
+
+
+
+
+
+
+ Form validation
+
+
+
+
+
+
+
+
+```
+
+## _Javascript_
+```js
+let name = document.getElementById("name");
+let email = document.getElementById("email");
+let phoneNo = document.getElementById("phoneNo");
+let message = document.getElementById("message");
+
+function phoneNumber() {
+ let phoneNoLength = phoneNo.value;
+ if (phoneNoLength.length > 10 || phoneNoLength.length < 10) {
+ alert("Invalid phone number");
+ }
+ else if (phoneNo.type !== "number") {
+ alert("Invalid phone number");
+ }
+ else {
+ textArea();
+ }
+}
+
+function textArea() {
+ let messageLength = message.value;
+ if (messageLength.length > 250) {
+ alert("Message should be less than 250 characters");
+ }
+}
+```
+## _CSS_
+```css
+.colorful-form {
+ max-width: 400px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #f5f5f5;
+ border-radius: 10px;
+
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-label {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #333;
+}
+
+.form-input {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ background-color: #fff;
+ color: #333;
+ border-radius: 5px;
+}
+
+textarea.form-input {
+ height: 100px;
+}
+
+.form-button {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ background-color: #ff6f69;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.form-button:hover {
+ background-color: #ff5f59;
+}
+
+.colorful-form {
+ max-width: 420px;
+ margin: 0 auto;
+ padding: 25px;
+ background-color: #f5f5f5;
+ border-radius: 10px;
+ left: 50%;
+ margin-top: 250px;
+ padding-right: 40px;
+}
+```
+