Add validations for personal information form

app.js

@@ -2,6 +2,30 @@
 
 let currentPage = 2;
 const tabs = document.getElementsByClassName('page');
+const validField = (formId, fieldId, customFieldId) => {
+  const form = document.getElementById(formId);
+  const element = form.querySelector(`#${fieldId}`);
+  if (element.value === '') {
+    form.classList.add('was-validated');
+    console.log("invalid", fieldId)
+    return false;
+  } else {
+    if (customFieldId && element.value === 'other') {
+      const customField = form.querySelector(`#${customFieldId}`);
+      if (customField.value === '') {
+        customField.classList.add('is-invalid');
+        console.log("invalidcustom", customFieldId)
+        return false
+      } else {
+        console.log("valid custom", customFieldId)
+        return true
+      }
+    }
+    console.log("custom with response", fieldId, customFieldId)
+    return true;
+  }
+}
+
 const conditions = {
   agreement: [
     () => {
@@ -14,6 +38,13 @@ const conditions = {
         return false;
       }
     }
+  ],
+  personalInformation: [
+    () => validField('personal-information-form', 'age-range'),
+    () => validField('personal-information-form', 'gender', 'gender-custom'),
+    () => validField('personal-information-form', 'ethnicity', 'ethnicity-custom'),
+    () => validField('personal-information-form', 'town-birth'),
+    () => validField('personal-information-form', 'postal-code'),
   ]
 }
 
@@ -32,7 +63,7 @@ const showPage = (page) => {
 const isValid = condition => condition();
 
 const changePage = (page, condition) => {
-  if (condition && !conditions[condition].every(isValid)) {
+  if (condition && !conditions[condition].map(isValid).every(result => result)) {
     console.log("not all conditions passed");
     return;
   }

index.html

@@ -44,11 +44,13 @@
         </div>
         <div id="personal-information" class="content page page-2">
           <h2>Personal Information</h2>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque suscipit nulla animi amet minima, recusandae, nostrum ab vero temporibus ducimus deleniti quisquam in quod expedita dolore? Eos veritatis alias magni.</p>
+          <p>All fields are required</p>
           <form id="personal-information-form" class="needs-validation">
             <div class="form-group">
               <label for="age-range">Age</label>
-              <select id="age-range" class="custom-select form-control">
-                <option selected disabled>Select an age</option>
+              <select id="age-range" class="custom-select form-control" required>
+                <option value="" selected disabled>Please select an option</option>
                 <option value="1">11 - 17</option>
                 <option value="2">18 - 29</option>
                 <option value="3">30 - 45</option>
@@ -56,13 +58,11 @@
                 <option value="5">60 - 69</option>
                 <option value="6">70+</option>
               </select>
-              <div class="invalid-feedback">
-                Age is required
-              </div>
             </div>
             <div class="form-group">
               <label for="gender">Gender</label>
-              <select class="form-control custom-select" id="gender" custom-value="gender-custom" onChange="showCustomInput('gender-custom', this)">
+              <select class="form-control custom-select" id="gender" custom-value="gender-custom" onChange="showCustomInput('gender-custom', this)" required>
+                <option value="" selected disabled>Please select an option</option>
                 <option value="male">Male</option>
                 <option value="female">Female</option>
                 <option value="other">Neither, I identify as follows</option>
@@ -71,8 +71,8 @@
             </div>
             <div class="form-group">
               <label for="ethnicity">Ethnicity</label>
-              <select id="ethnicity" class="form-control custom-select" custom-value="ethnicity-custom" onChange="showCustomInput('ethnicity-custom', this)">
-                <option value="" selected="selected" disabled="disabled">Please select</option>
+              <select id="ethnicity" class="form-control custom-select" custom-value="ethnicity-custom" onChange="showCustomInput('ethnicity-custom', this)" required>
+                <option value="" selected disabled>Please select an option</option>
                 <optgroup label="White">
                   <option value="English/Welsh/Scottish/Northern Irish/British">English/Welsh/Scottish/Northern Irish/British</option>
                   <option value="Irish">Irish</option>
@@ -103,13 +103,19 @@
                 The options above are taken from the 2011 UK Census. You can also define yours selecting the 'None of the above' option and typing in the text box
               </small>
             </div>
-            <div class="row">
-              <div class="col-md-12 mb-3">
-                <label for="postal-code">Postal code</label>
-                <input type="text" class="form-control" id="postal-code"/>
+            <div class="form-group">
+              <label for="town-birth">Town of birth</label>
+              <input id="town-birth" type="text" class="form-control" required/>
+            </div>
+            <div class="form-group">
+              <label for="postal-code">Current postal code</label>
+              <input id="postal-code" type="text" class="form-control" required/>
+              <div class="form-group form-check">
+                <input type="checkbox" class="form-check-input" id="long-time-resident" >
+                <label class="form-check-label" for="long-time-resident">I have lived in the area for 1/2 years</label>
               </div>
             </div>
-            <button type="button">Next</button>
+            <button type="button" onclick="changePage(3, 'personalInformation')" class="btn btn-primary">Next</button>
           </form>
       </div>
       <div id="map-drawing" class="content page page-3">

styles.css

@@ -11,4 +11,8 @@
 #personal-information-form input#gender-custom,
 #personal-information-form input#ethnicity-custom {
   display: none;
+}
+
+#personal-information-form label[for="long-time-resident"] {
+  color: black;
 }