From 38757567c1c5e49fd20c61149082d0d03d51ddeb Mon Sep 17 00:00:00 2001
From: Shahan Arshad <68821506+sazk07@users.noreply.github.com>
Date: Wed, 25 Dec 2024 18:24:31 +0500
Subject: [PATCH] Edit: repeat code

This commit will extract out repeat code into a new function and call that function from the event handlers. This will improve code readability.
---
 .../extensions/forms/form_validation/index.md | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
index 661b127e80a3f09..718311dd41af426 100644
--- a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
@@ -789,6 +789,18 @@ const error = email.nextElementSibling;
 // As per the HTML Specification
 const emailRegExp =
   /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+// create a function that checks if the email is valid,
+// sets class names and returns a boolean
+const isValidEmail = () => {
+  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
+  // set class name to indicate validity
+  email.className = isValid ? "valid" : "invalid";
+  // if email is valid, clear the span element
+  // and assign ".error" to the class name
+  error.textContent = "";
+  error.className = "error";
+  return isValid;
+};
 
 // Now we can rebuild our validation constraint
 // Because we do not rely on CSS pseudo-class, we have to
@@ -796,35 +808,22 @@ const emailRegExp =
 window.addEventListener("load", () => {
   // Here, we test if the field is empty (remember, the field is not required)
   // If it is not, we check if its content is a well-formed email address.
-  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
-  email.className = isValid ? "valid" : "invalid";
+  isValidEmail();
 });
 
 // This defines what happens when the user types in the field
 email.addEventListener("input", () => {
-  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
-  if (isValid) {
-    email.className = "valid";
-    error.textContent = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
+  isValidEmail();
 });
 
 // This defines what happens when the user tries to submit the data
 form.addEventListener("submit", (event) => {
   event.preventDefault();
 
-  const isValid = email.value.length === 0 || emailRegExp.test(email.value);
-  if (!isValid) {
-    email.className = "invalid";
+  isValidEmail();
+  if (!isValidEmail()) {
     error.textContent = "I expect an email, darling!";
     error.className = "error active";
-  } else {
-    email.className = "valid";
-    error.textContent = "";
-    error.className = "error";
   }
 });
 ```