Validation for Email & Password

utkarshh7 · Jan 16, 2025 · 274dd94 · 274dd94
1 parent 0f80383
commit 274dd94
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 0 deletions.
diff --git a/Validation/index.html b/Validation/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form Example</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="form">
+        <form action="">
+
+            <h2>Sign Up</h2>
+            <fieldset>
+                <legend>Email</legend>
+                <input type="email" id="email">
+            </fieldset>
+
+            <fieldset>
+                <legend>Password</legend>
+                <div class="password-container">
+                    <input type="password" id="password">
+                    <button type="button" id="togglePassword">
+                        <span id="eyeIcon">👁</span>
+                    </button>
+                </div>
+            </fieldset>
+
+            <button type="submit">Login</button>
+        </form>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Validation/script.js 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!");
+    }
+});
diff --git a/Validation/style.css 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%;
+}
+