diff --git a/Validation/index.html b/Validation/index.html new file mode 100644 index 0000000..1999738 --- /dev/null +++ b/Validation/index.html @@ -0,0 +1,35 @@ + + + + + + Form Example + + + +
+
+ +

Sign Up

+
+ Email + +
+ +
+ Password +
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/Validation/script.js b/Validation/script.js new file mode 100644 index 0000000..f3a5329 --- /dev/null +++ b/Validation/script.js @@ -0,0 +1,37 @@ +document.querySelector("form").addEventListener("submit", function (event) { + event.preventDefault(); + + const email = document.getElementById("email").value.trim(); + const password = document.getElementById("password").value.trim(); + + let isValid = true; + + if (!email) { + alert("Email is required."); + isValid = false; + } else if (!/^\S+@\S+\.\S+$/.test(email)) { + alert("Please enter a valid email address."); + isValid = false; + } + + if (!password) { + alert("Password is required."); + isValid = false; + } else if (password.length < 8) { + alert("Password must be at least 8 characters long."); + isValid = false; + } else if (!/[A-Z]/.test(password)) { + alert("Password must contain at least one uppercase letter."); + isValid = false; + } else if (!/[a-z]/.test(password)) { + alert("Password must contain at least one lowercase letter."); + isValid = false; + } else if (!/[0-9]/.test(password)) { + alert("Password must contain at least one number."); + isValid = false; + } + + if (isValid) { + alert("Form submitted successfully!"); + } +}); \ No newline at end of file diff --git a/Validation/style.css b/Validation/style.css new file mode 100644 index 0000000..c634d12 --- /dev/null +++ b/Validation/style.css @@ -0,0 +1,20 @@ +body{ + font-family: 'Poppins', sans-serif; + background-color: wheat; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.form{ + background: rgb(199, 177, 158); + /* margin: auto; */ + display: flex; + align-items: center; + gap: 20px; + padding: 20px; + border: 2px solid rgb(91, 91, 11); + width: 30%; +} +