From 914cb685d1300d11b84a7ceee156b83f85986122 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Thu, 1 Jul 2021 16:58:01 -0400
Subject: [PATCH] Create form validation

---
 Chapter 12/form validation | 95 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 Chapter 12/form validation
diff --git a/Chapter 12/form validation b/Chapter 12/form validation
new file mode 100644
index 0000000..0917e0a
--- /dev/null
+++ b/Chapter 12/form validation	
@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+
+<head>
+    <style>
+        .hide {
+            display: none;
+        }
+        
+        .error {
+            color: red;
+            font-size: 0.8em;
+            font-family: sans-serif;
+            font-style: italic;
+        }
+        
+        input {
+            border-color: #ddd;
+            width: 400px;
+            display: block;
+            font-size: 1.5em;
+        }
+    </style>
+</head>
+
+<body>
+    <form name="myform"> Email :
+        <input type="text" name="email"> <span class="error hide"></span>
+        <br> Password :
+        <input type="password" name="password"> <span class="error hide"></span>
+        <br> User Name :
+        <input type="text" name="userName"> <span class="error hide"></span>
+        <br>
+        <input type="submit" value="Sign Up"> </form>
+    <script>
+        const myForm = document.querySelector("form");
+        const inputs = document.querySelectorAll("input");
+        const errors = document.querySelectorAll(".error");
+        const required = ["email", "userName"];
+        myForm.addEventListener("submit", validation);
+
+        function validation(e) {
+            let data = {};
+            e.preventDefault();
+            errors.forEach(function (item) {
+                item.classList.add("hide");
+            })
+            let error = false;
+            inputs.forEach(function (el) {
+                let tempName = el.getAttribute("name");
+                if (tempName != null) {
+                    el.style.borderColor = "#ddd";
+                    if (el.value.length == 0 && required.includes(tempName)) {
+                        addError(el, "Required Field", tempName);
+                        error = true;
+                    }
+                    if (tempName == "email") {
+                        let exp = /([A-Za-z0-9._-]+@[A-Za-z0-9._-]+\.[A-Za-z0-9]+)\w+/;
+                        let result = exp.test(el.value);
+                        if (!result) {
+                            addError(el, "Invalid Email", tempName);
+                            error = true;
+                        }
+                    }
+                    if (tempName == "password") {
+                        let exp = /[A-Za-z0-9]+$/;
+                        let result = exp.test(el.value);
+                        if (!result) {
+                            addError(el, "Only numbers and Letters", tempName);
+                            error = true;
+                        }
+                        if (!(el.value.length > 3 && el.value.length < 9)) {
+                            addError(el, "Needs to be between 3-8 characters", tempName);
+                            error = true;
+                        }
+                    }
+                    data[tempName] = el.value;
+                }
+            })
+            if (!error) {
+                myForm.submit();
+            }
+        }
+
+        function addError(el, mes, fieldName) {
+            let temp = el.nextElementSibling;
+            temp.classList.remove("hide");
+            temp.textContent = fieldName.toUpperCase() + " " + mes;
+            el.style.borderColor = "red";
+            el.focus();
+        }
+    </script>
+</body>
+
+</html>
