Client side validation form - Using JS Only

kesava-karri · Nov 4, 2024 · f908af3 · f908af3
1 parent 891de02
commit f908af3
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 86 deletions.
diff --git a/...cript/intermediate-js/client-side-form-validation-w-js/browser-form-validation/index.html b/...cript/intermediate-js/client-side-form-validation-w-js/browser-form-validation/index.html
diff --git a/...script/intermediate-js/client-side-form-validation-w-js/browser-form-validation/style.css b/...script/intermediate-js/client-side-form-validation-w-js/browser-form-validation/style.css
diff --git a/...on-w-js/browser-form-validation/README.md → ...s/form-validation-using-only-js/README.md b/...on-w-js/browser-form-validation/README.md → ...s/form-validation-using-only-js/README.md
@@ -1,4 +1,4 @@
-### Regex pattern descripion for password field
+### Regex pattern description for password field
 
 - _^_ indicates the start of string
 - _$_ indicates the end of string

diff --git a/...rowser-form-validation/form-validation.js → ...lidation-using-only-js/form-validation.js b/...rowser-form-validation/form-validation.js → ...lidation-using-only-js/form-validation.js
@@ -4,6 +4,7 @@ const zipcode = document.querySelector("#zipcode");
 const password = document.querySelector("#pass");
 
 const handleInputValidation = (e) => {
+  e.currentTarget.required = "required";
   if (e.currentTarget.validity.valid) {
     const errorEle = document.querySelector(`#${e.currentTarget.id} + .error`);
     errorEle.textContent = "";
@@ -45,12 +46,17 @@ const form = document.querySelector("#form");
 form.addEventListener("submit", (e) => {
   if (!email.validity.valid) {
     showError(email);
+    e.preventDefault();
   } else if (!country.validity.valid) {
     showError(country);
+    e.preventDefault();
   } else if (!zipcode.validity.valid) {
     showError(zipcode);
+    e.preventDefault();
   } else if (!password.validity.valid) {
     showError(password);
+    e.preventDefault();
+  } else {
+    alert("High Five!!! The form has been successfully submitted!");
   }
-  e.preventDefault();
 });
diff --git a/...intermediate-js/client-side-form-validation-w-js/form-validation-using-only-js/index.html b/...intermediate-js/client-side-form-validation-w-js/form-validation-using-only-js/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Browser Form Validation</title>
+    <script src="form-validation.js" defer></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="whole">
+      <h3>Sample form w password field <br>(Yes, regex validation included)</h3>
+      <div class="container">
+        <form novalidate id="form">
+          <div>
+            <label for="email">Email: </label>
+            <input type="email" id="email" />
+            <span class="error"></span>
+          </div>
+          <div>
+            <label for="select-country">Country:</label>
+            <select name="country" id="select-country" >
+              <option value="">--Please choose an option--</option>
+              <option value="IND">India</option>
+              <option value="USA">United States</option>
+              <option value="VIE">Vietnam</option>
+              <option value="GER">Germany</option>
+              <option value="THA">Thailand</option>
+              <option value="UAE">United Arab Emirates</option>
+            </select>
+            <span class="error"></span>
+          </div>
+          <div>
+            <label for="zipcode">Zip Code:</label>
+            <input
+              type="text"
+              inputmode="numeric"
+              pattern="\d*"
+              id="zipcode"
+              minlength="5"
+              maxlength="5"
+
+            />
+            <span class="error"></span>
+          </div>
+          <div>
+            <label for="pass">Password: </label>
+            <input
+              type="password"
+              id="pass"
+              pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{5,}$"
+              minlength="5"
+
+            />
+            <span class="error"></span>
+          </div>
+          <div>
+            <button type="submit" id="btn-submit">Submit</button>
+          </div>
+        </form>
+      </div>
+    </div>
+</html>
diff --git a/.../intermediate-js/client-side-form-validation-w-js/form-validation-using-only-js/style.css b/.../intermediate-js/client-side-form-validation-w-js/form-validation-using-only-js/style.css
@@ -0,0 +1,37 @@
+html {
+  width: 100%;
+}
+
+.whole {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  display: flex;
+  max-width: min-content;
+  justify-content: end;
+}
+
+.container div {
+  margin: 20px;
+}
+
+.error {
+  border-color: red;
+  padding: 0.2em;
+  border-radius: 0 0 5px 5px;
+}
+
+input:invalid,
+select:invalid {
+  border-color: #900;
+  background-color: #ffd;
+}
+
+input:focus:invalid,
+select:focus:invalid {
+  outline: none;
+}