Adding form validation to group page

Author: forstisabella

src/_includes/components/codepens/group-spec.html

@@ -16,21 +16,50 @@
       var received_ts = new Date(received);
       var received_iso = received_ts.toISOString();
 
+      var errors = [];
+
       // Add regular expression check for number of employees
       var employeesRegex = /^[0-9]+$/;
       if (!employeesRegex.test(employees)) {
-        alert("Please enter only numbers in the Employees field");
-        return;
-      }
+        const employeesError = document.getElementById("employees-error");
+        employeesError.style.display = "block";
+        const employeesField = document.getElementById("employees");
+        employeesField.style.outline = "2px solid red";
+        errors.push("Employees is invalid");
+      } else {
+        const employeesError = document.getElementById("employees-error");
+        employeesError.style.display = "none";
+        const employeesField = document.getElementById("employees");
+        employeesField.style.outline = "";
+    }
+
 
       // Add regular expression check for total billed
       var billedRegex = /^[0-9]+$/;
       if (!billedRegex.test(totalBilled)) {
-        alert("Please enter only numbers in the Total Billed field");
-        return;
-      }
+        billedError = document.getElementById("billed-error");
+        billedError.style.display = "block";
+        totalBilled = document.getElementById("totalBilled");
+        totalBilled.style.outline = "2px solid red";
+        errors.push("Total Billed is invalid");
+      } else {
+        const billedError = document.getElementById("billed-error");
+        billedError.style.display = "none";
+        const totalBilled = document.getElementById("totalBilled");
+        totalBilled.style.outline = "";
+    }
 
-      var output = `{
+    if (errors.length > 0) {
+    // Display all the errors and highlight the respective fields
+    const errorDiv = document.getElementById("errors");
+    errorDiv.innerHTML = "";
+    errors.forEach(function(error) {
+      errorDiv.innerHTML += "<p>" + error + "</p>";
+    });
+    return false;
+  }
+
+    var output = `{
         "anonymousId": "507f191e810c19729de860ea",
         "channel": "browser",
         "context": {
@@ -59,10 +88,13 @@
         "version": "1.1"
       }`;
 
+    var output_container = document.getElementById("output_container");
       output_container.innerHTML = output;
       Prism.highlightElement(output_container);
-    }
-    </script>
+      return true;
+  }
+
+</script>
 
 <script>
   function showOutput() {
@@ -86,10 +118,12 @@ <h3> Sample Group call</h3>
       <input type="text" id="industry" value="Beauty">
       <label for="employees">Employees:</label>
       <input type="text" id="employees" value="200">
+      <span class="error-message" id="employees-error">Please enter a valid number of employees.</span>
       <label for="plan">Plan:</label>
       <input type="text" id="plan" value="Premium">
       <label for="totalBilled">Total Billed:</label>
       <input type="text" id="totalBilled" value="34000">
+      <span class="error-message" id="billed-error">Please enter only numbers in the Total Billed field.</span>
       <input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
         value="See a sample group call">
     </div>

src/_sass/components/_sample-form.scss

@@ -26,7 +26,7 @@
  .sample-form {
     display: grid;
     grid-template-columns: 50px 1fr;
-    grid-gap: 6px;
+    grid-gap: 16px;
     margin-top: 6px;
     align-items: center;