diff --git a/Form Validation/index.html b/Form Validation/index.html
new file mode 100644
index 0000000..b0178c9
--- /dev/null
+++ b/Form Validation/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+ Form Validation
+
+
+
+ Form Validation
+ Add your detail below!
+
+
+
+
+
+
+
+
+
diff --git a/Form Validation/index.js b/Form Validation/index.js
new file mode 100644
index 0000000..37ee3ac
--- /dev/null
+++ b/Form Validation/index.js
@@ -0,0 +1,33 @@
+"use strict";
+
+const form = document.querySelector("#form");
+const fname = document.querySelector("#fname");
+const surname = document.querySelector("#surname");
+const email = document.querySelector("#email");
+const validationText = document.querySelector("#validation-message");
+const btn = document.querySelector("#btn");
+
+form.addEventListener("input", (e) => {
+ e.preventDefault();
+ let txt = "";
+ validationText.innerHTML = "";
+
+ if (form.checkValidity()) {
+ validationText.innerHTML = "Looks Good!";
+ }
+
+ if (e.target.id === "fname" && !fname.checkValidity()) {
+ txt = fname.validationMessage;
+ validationText.innerHTML = `Name: ${txt}`;
+ }
+
+ if (e.target.id === "surname" && !surname.checkValidity()) {
+ txt = surname.validationMessage;
+ validationText.innerHTML = `Surname: ${txt}`;
+ }
+
+ if (e.target.id === "email" && !email.checkValidity()) {
+ txt = email.validationMessage;
+ validationText.innerHTML = `Email: ${txt}`;
+ }
+});
\ No newline at end of file
diff --git a/Form Validation/styles.css b/Form Validation/styles.css
new file mode 100644
index 0000000..a98b7aa
--- /dev/null
+++ b/Form Validation/styles.css
@@ -0,0 +1,13 @@
+input {
+ margin: .5em 0;
+ padding: 0.5em;
+ font-size: 1rem;
+}
+
+input:valid:required {
+ background-color: lightgreen;
+}
+
+input:invalid {
+ box-shadow: 0 0 5px 1px red;
+}