signup.html

<form class="form-signin" name="signUpForm" id="signUpForm" action="" method="POST" novalidate>
                    <div class="third-party-signups">
                      <a class="button google-branded-button j-third-party t-google-signup" href="#">
                         <span class="google-branded-button-icon">
                            <img src="./assets/img/svg/google-icon.svg" alt="Google Icon" />
                         </span>
                         <span class="branded-button-text google-branded-button-text">Sign Up with Google</span>
                      </a>
                    </div>
                    <div class="or-seperator"><b>or</b></div>
                    <div class="form-label-group">
                        <select name="" class="form-control" id="selectUserCategory">
                            <option value="0">Select your Account Type</option>
                            <option value="student">Student</option>
                            <option value="organization">Organisation</option>
                          </select>
                    </div>
                    <!-- This is the account Creation Section for Students -->
                    <section id="studentAccountCreationSection">
                        <div class="form-label-group">
                            <input type="name" class="form-control" id="inputStudentName" placeholder="Full Name" required>
                            <label for="inputStudentName">Full Name</label>
                            <div class="error" id="inputStudentNameErr"></div>
                          </div>

                          <div class="form-label-group">
                            <input type="email" id="inputStudentEmail" class="form-control" placeholder="Email address" required autofocus>
                            <label for="inputStudentEmail">Email address</label>
                            <div class="error" id="inputStudentEmailErr"></div>
                          </div>

                          <div class="form-label-group">
                            <input type="tel" id="inputStudentPhone" class="form-control" placeholder="Phone Number" required autofocus>
                            <label for="inputStudentPhone">Phone Number</label>
                            <div class="error" id="inputStudentPhoneErr"></div>
                          </div>

                          <div class="form-label-group">
                            <input type="text" id="inputStudentAddress" class="form-control" placeholder="Address" required autofocus>
                            <label for="inputStudentAddress">Address</label>
                            <div class="error" id="inputStudentAddressErr"></div>
                          </div>

                          <div class="form-label-group">
                            <select name="availability" class="form-control" id="inputStudentAvailability">
                                <option value="">Availability</option>
                                <option>Freelance</option>
                                <option>Full Time</option>
                                <option>Part Time</option>
                                <option>Week Days</option>
                                <option>Week End</option>
                              </select>
                              <div class="error" id="availibilityStudentErr"></div>
                          </div>

                          <div class="form-label-group">
                            <input type="number" id="inputStudentRate" class="form-control" placeholder="Rate/hr" required autofocus>
                            <label for="inputStudentRate">Rate/Hr</label>
                            <div class="error" id="inputStudentRateErr"></div>
                          </div>

                        <div class="form-label-group">
                          <input type="password" id="inputStudentPassword" class="form-control" placeholder="Password" required>
                          <label for="inputStudentPassword">Password</label>
                          <div class="error" id="inputStudentPasswordErr"></div>
                        </div>

                        <div class="form-label-group">
                          <input type="password" id="inputStudentConfirmPassword" class="form-control" placeholder="Confirm Password" required>
                          <label for="inputStudentConfirmPassword">Confirm Password</label>
                          <div class="error" id="inputStudentConfirmPasswordErr"></div>
                        </div>

                    </section>
                    <!-- This is the Account Creations for Organizations -->
                    <section id="organizationAccountCreationSection">
                        <div class="form-label-group">
                          <input type="name" id="inputOrgName" class="form-control" placeholder="Organisational Name" required>
                          <label for="inputOrgName">Organisation Name</label>
                          <div class="error" id="inputOrgNameErr"></div>
                        </div>

                        <div class="form-label-group">
                          <input type="email" id="inputOrgEmail" class="form-control" placeholder="Email address" required autofocus>
                          <label for="inputOrgEmail">Email address</label>
                          <div class="error" id="inputOrgEmailErr"></div>
                        </div>

                        <div class="form-label-group">
                          <input type="tel" id="inputOrgPhone" class="form-control" placeholder="Phone Number" required autofocus>
                          <label for="inputOrgPhone">Phone Number</label>
                          <div class="error" id="inputOrgPhoneErr"></div>
                        </div>

                        <div class="form-label-group">
                          <input type="text" id="inputOrgAddress" class="form-control" placeholder="Address" required autofocus>
                          <label for="inputOrgAddress">Address</label>
                          <div class="error" id="inputOrgAddressErr"></div>
                        </div>

                        <div class="form-label-group">
                          <input type="text" id="inputOrgDescription" class="form-control" placeholder="Description" required autofocus>
                          <label for="inputOrgDescription">Description</label>
                          <div class="error" id="inputOrgDescriptionErr"></div>
                        </div>

                        <div class="form-label-group">
                          <select name="" class="form-control" id="inputOrgCategories">
                              <option value="categories" data-id=0>Categories</option>
                            </select>
                            <div class="error" id="inputOrgCategoriesErr"></div>
                        </div>


                      <div class="form-label-group">
                        <input type="password" id="inputOrgPassword" class="form-control" placeholder="Password" required>
                        <label for="inputOrgPassword">Password</label>
                        <p class="error" id="inputOrgPasswordErr"></p>
                      </div>

                      <div class="form-label-group">
                        <input type="password" id="inputOrgConfirmPassword" class="form-control" placeholder="Confirm Password" required>
                        <label for="inputOrgConfirmPassword">Confirm Password</label>
                      </div>
                      <p class="error" id="inputOrgConfirmPasswordErr"></p>
                    </section>

                    <button class="btn btn-lg btn-facebook btn-block text-uppercase" id="createAccountBtn" type="button" onclick="createAccount()" disabled>Sign Up</button>
                    
                  </form>

signupvalidation.js

let url = "https://stuaas.herokuapp.com/api/v1/";

// =================================================
// | Let users select a category to register with  |
// =================================================
document.addEventListener("DOMContentLoaded", () => {
    // Wait till all the DOM element is rendered;
    let selectUserCategory = document.querySelector('#selectUserCategory');
    selectUserCategory.addEventListener("change", () => {
        // When the selected category is changed from what it was initially
        let studentAccountCreationSection = document.querySelector("#studentAccountCreationSection");
        let organizationAccountCreationSection = document.querySelector("#organizationAccountCreationSection");
        let userCategorySelected = selectUserCategory.value; // The selected user category
        console.log("The selected category is ====>> ", userCategorySelected)
        let createAccountBtn = document.querySelector('#createAccountBtn');
        if(userCategorySelected === 'organization'){
            // When organization is selected, some data is loaded from the database and it takes some 
            // time to load this data. All input fields wil be hidden till this is loaded and rendered.
            studentAccountCreationSection.style.display = 'none';
            organizationAccountCreationSection.style.display = 'none';
            createAccountBtn.removeAttribute("disabled");
            // Fetch the category for organizations 
            fetch(`${url}organizations/categories`)
            .then(res => res.json())
            .then(res => {
                studentAccountCreationSection.style.display = "none";
                organizationAccountCreationSection.style.display = "block";
                if(res.success){
                    let datas = res.payload.data;
                    datas.forEach(data => {
                        let categories = document.querySelector('#inputOrgCategories');
                        categories.innerHTML += `<option value="${data.name}" data-id="${data.id}">${data.name}</option>`
                    })
                }
            })
            .catch(err => {
                console.log("The error is => ", err);
            })
        }
        else if(userCategorySelected === "0"){
            createAccountBtn.setAttribute("disabled", '');
            organizationAccountCreationSection.style.display = "none";
            studentAccountCreationSection.style.display = "none";
        }
        else{
            createAccountBtn.removeAttribute("disabled");
            organizationAccountCreationSection.style.display = "none";
            studentAccountCreationSection.style.display = "block";
        }
        console.log(userCategorySelected);
    })
});

// Defining a function to display error message
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}


// This is a single validator Object used to valdate both the students and companies data
function SaasValidator(){
    this.checkEmpty = (arr) => {
        // This method takes in an array if values and makes checks if any of them is an empty string.
        arr.forEach(data => {
            if (data[0] === "") {
                document.getElementById(data[1]).textContent = `${data[2]} is required`;
            }
            else{
                document.getElementById(data[1]).textContent = "";   
            }
        })
        // check if all the element has been filled
        let result = arr.every(val => val[0] !== "");
        return result;
    }

    this.validatePassword = (pass) => {
        // This function makes sure an inputted password is in it's right format
        if(pass[0].length < 8){
            document.getElementById(pass[1]).textContent = "Password must be at least 8 characters long";
            return false;
        }

        else if(pass[0].match(/[A-Z]/g) === null){
            document.getElementById(pass[1]).textContent = "Password must contain at least an uppercase letter";
            return false;
        }

        else if(pass[0].match(/[0-9]/g) === null){
            document.getElementById(pass[1]).textContent = "Password must contain at least a number";
            return false;
        }

        else if(pass[0] !== document.getElementById(pass[2]).value){
            document.getElementById(pass[2]+'Err').textContent = "Passwords must match";
            return false;
        }
        else{
            document.getElementById(pass[2]+'Err').textContent = "";
            return true;
        }
    }

    this.validateAll = (arr) => {
        // Make sure all other validators here run accordingly
        if(this.checkEmpty(arr)){
            // If no field is left empty, validate the password
            return this.validatePassword(arr[6])
        }
        else{
            return false;
        }
    }
}

// Validate the data of students registration
function validateStudents(){
    let inputAndErrorDetails = [['inputStudentName', 'inputStudentNameErr', 'Full name'], 
    ['inputStudentEmail', 'inputStudentEmailErr', 'Email'], ['inputStudentPhone', 'inputStudentPhoneErr', 'Phone number'], 
    ['inputStudentAddress', 'inputStudentAddressErr', 'Address'], ['inputStudentAvailability', 'availibilityStudentErr', 'Availability'], 
    ['inputStudentRate', 'inputStudentRateErr', 'Hourly Rate'], ['inputStudentPassword', 'inputStudentPasswordErr', 'Password'], ['inputStudentConfirmPassword', 'inputStudentConfirmPasswordErr', 'Confirm Password']];
    // The above array is an array of te ID's of the student data input field, it's corresponding error fields and field name
    inputAndErrorDetails = inputAndErrorDetails.map(data => {
        // I'm mapping through the array so I can get on the value in every Input field and the ID of it's
        // corresponding error and field name in a single Array
        return [document.getElementById(data[0]).value, data[1], data[2]];
    })
    // Check if all the fields have been filled out and display error messages fr the ones that aren't filled
    let Validator = new SaasValidator();
    let validateInputs = Validator.validateAll(inputAndErrorDetails);
    console.log(validateInputs);
}

// Validate the data of Company registration
function validateCompanies(){
    let inputAndErrorDetails = [['inputOrgName', 'inputOrgNameErr', 'Company name'], 
    ['inputOrgEmail', 'inputOrgEmailErr', 'Email'], ['inputOrgPhone', 'inputOrgPhoneErr', 'Phone number'], 
    ['inputOrgAddress', 'inputOrgAddressErr', 'Address'], ['inputOrgDescription', 'inputOrgDescriptionErr', 'Description'], 
    ['inputOrgCategories', 'inputOrgCategoriesErr', 'Category'], ['inputOrgPassword', 'inputOrgPasswordErr', 'Password'], ['inputOrgConfirmPassword', 'inputOrgConfirmPasswordErr', 'Confirm Password']];
     // The above array is an array of te ID's of the student data input field, it's corresponding error fields and field name
    inputAndErrorDetails = inputAndErrorDetails.map(data => {
        // I'm mapping through the array so I can get on the value in every Input field and the ID of it's
        // corresponding error and field name in a single Array
        return [document.getElementById(data[0]).value, data[1], data[2]];
    })
    console.log(inputAndErrorDetails);
    // Check if all the fields have been filled out and display error messages fr the ones that aren't filled
    let Validator = new SaasValidator();
    let validateInputs = Validator.validateAll(inputAndErrorDetails);
    console.log(validateInputs);
}


function createAccount(){
    let selectUserCategory = document.querySelector('#selectUserCategory');
    let valid = false;
        if(selectUserCategory.value === 'student'){
            // Validate students data first, then create account.
            let valid = validateStudents();
        } else if (selectUserCategory.value === 'organization'){
            // Validate orgnizations data first, then create account.
            let valid = validateCompanies();
        }

        if (valid) {
            createAccount();
        } else {
            console.error();
        }

}


// Form submission via FETCH

document.addEventListener("DOMContentLoaded", () => {

    const signUpForm = document.getElementById("signUpForm");
    
    signUpForm.addEventListener('click', function(e) {
        e.preventDefault();

        let studentName = document.getElementById('inputStudentName').value;
        let studentEmail = document.getElementById('inputStudentEmail').value;
        

        fetch(`${url}user/signup`, {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({studentName:inputStudentName, studentEmail:inputStudentEmail})        
        }).then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
    })

   });