more verification, updating examples

Author: forstisabella

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

@@ -18,6 +18,21 @@
 
       var errors = [];
 
+      // Regular expression check for industry name
+      var industryRegex = /^[A-Za-z-]+$/;
+      if (!industryRegex.test(industry)) {
+        const industryError = document.getElementById("industry-error");
+        industryError.style.display = "block";
+        const industryField = document.getElementById("industry");
+        industryField.style.outline = "2px solid red";
+        errors.push("Industry is invalid");
+      } else {
+        const industryError = document.getElementById("industry-error")
+        industryError.style.display = "none";
+        const industryField = document.getElementById("industry")
+        industryField.style.outline = "";
+    }
+
       // Add regular expression check for number of employees
       var employeesRegex = /^[0-9]+$/;
       if (!employeesRegex.test(employees)) {
@@ -113,16 +128,17 @@
     <h3> Sample Group call</h3>
     <div class="sample-form">
       <label for="name">Name:</label>
-      <input type="text" id="name" value="Fenty Beauty">
+      <input type="text" id="name" value="Twilio">
       <label for="industry">Industry:</label>
-      <input type="text" id="industry" value="Beauty">
+      <input type="text" id="industry" value="Software">
+      <span class="error-message" id="industry-error">Please enter a valid industry name, using only letters and hyphens.</span>
       <label for="employees">Employees:</label>
-      <input type="text" id="employees" value="200">
+      <input type="text" id="employees" value="20000">
       <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">
+      <input type="text" id="totalBilled" value="34000000">
       <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">

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

@@ -67,6 +67,21 @@
   loginsField.style.outline = "";
 }
 
+// Regular expression check for street
+var streetRegex = /^\d+\s[A-z]+\s[A-z]+/;
+if (!streetRegex.test(street)) {
+  const streetError = document.getElementById("street-error");
+  streetError.style.display = "block";
+  const streetField = document.getElementById("street");
+  streetField.style.outline = "2px solid red";
+  errors.push("Street is invalid");
+} else {
+  const streetError = document.getElementById("street-error");
+  streetError.style.display = "none";
+  const streetField = document.getElementById("street");
+  streetField.style.outline = "";
+}
+
 // Regular expression check for city name
 var cityRegex = /^[A-Za-z\s-']+$/;
 if (!cityRegex.test(city)) {
@@ -97,6 +112,21 @@
   stateField.style.outline = "";
 }
 
+// Regular expression check for country
+var countryRegex = /^[A-Z]{2}$/;
+if (!countryRegex.test(country)) {
+  const countryError = document.getElementById("country-error");
+  countryError.style.display = "block";
+  const countryField = document.getElementById("country");
+  countryField.style.outline = "2px solid red";
+  errors.push("Country is invalid");
+} else {
+  const countryError = document.getElementById("country-error");
+  countryError.style.display = "none";
+  const countryField = document.getElementById("country");
+  countryField.style.outline = "";
+}
+
 // Regular expression check for postcode  
 var postcodeRegex = /^\d{5}$/;
   if (!postcodeRegex.test(postcode)) {
@@ -181,29 +211,31 @@
     <h4> Sample Identify </h4>
     <div class="sample-form">
     <label for="name">Name:</label>
-    <input type="text" id="name" value="Dolly Parton">
+    <input type="text" id="name" value="John Smith">
     <span class="error-message" id="name-error">Please enter your name.</span>
     <label for="email">Email:</label>
-    <input type="text" id="email" value="dollyparton@fake-email.com">
+    <input type="text" id="email" value="john-smith@gmail.com">
     <span class="error-message" id="email-error">Please enter a valid email address.</span>
     <label for="plan">Plan:</label>
     <input type="text" id="plan" value="Premium">
     <label for="logins">Logins:</label>
     <input type="text" id="logins" value="2">
     <span class="error-message" id="logins-error">Please enter only numbers in the 'Logins' field.</span>
     <label for="street">Street:</label>
-    <input type="text" id="street" value="P.O. Box 150307">
+    <input type="text" id="street" value="101 Spear Street">
+    <span class="error-message" id="street-error">Please enter a valid street address, including the street name and number.</span>
     <label for="city">City:</label>
-    <input type="text" id="city" value="Nashville">
+    <input type="text" id="city" value="San Francisco">
     <span class="error-message" id="city-error">Please enter a valid city name in the 'City' field.</span>
     <label for="state">State:</label>
-    <input type="text" id="state" value="TN">
+    <input type="text" id="state" value="CA">
     <span class="error-message" id="state-error">Please enter a valid two-letter state code in all caps, like 'CA' for California.</span>
     <label for="postcode">Zip Code:</label>
-    <input type="text" id="postcode" value="37215">
+    <input type="text" id="postcode" value="94105">
     <span class="error-message" id="postcode-error">Please enter a valid five-digit zip code.</span>
     <label for="country">Country:</label>
-    <input type="text" id="country" value="USA">
+    <input type="text" id="country" value="US">
+    <span class="error-message" id="country-error">Please enter a two-letter country code in all caps, like 'US' for United States.</span>
     <input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample identify call">
   </div>
   </div>