function once mandatoryFields have been completed.function checkForm() {

function init() {    checkForm();    hint();    setFocus();    switchToolTip();}// This function calls functions mandatoryFields and validValueFields when onsubmit it’s clicked.

validValueFields function will happen once mandatoryFields have been completed.function checkForm() {    document.getElementById(“contactForm”).onsubmit = function() {        var valid = false;        if (mandatoryFields()) {            validValueFields(“firstName”, “lastName”, “han”, “email”, “telephoneNumber”);        }        return valid;    };}// I used a for loop to show the error messages function mandatoryFields() {    var valid = true;    var errorCollection = ;    if (document.getElementById(“firstName”).value === “” || document.

getElementById(“firstName”).value === “Enter First name”) {        errorCollection.push(“firstName”);        valid = false;    } else clearError(“firstName”);    if (document.getElementById(“lastName”).value === “” || document.

getElementById(“lastName”).value === “Enter Last Name”) {        errorCollection.push(“lastName”);        valid = false;    } else clearError(“lastName”);    if (document.getElementById(“title”).value === “0”) {        errorCollection.

Best services for writing your paper according to Trustpilot

Premium Partner
From $18.00 per page
4,8 / 5
4,80
Writers Experience
4,80
Delivery
4,90
Support
4,70
Price
Recommended Service
From $13.90 per page
4,6 / 5
4,70
Writers Experience
4,70
Delivery
4,60
Support
4,60
Price
From $20.00 per page
4,5 / 5
4,80
Writers Experience
4,50
Delivery
4,40
Support
4,10
Price
* All Partners were chosen among 50+ writing services by our Customer Satisfaction Team

push(“title”);        valid = false;    } else clearError(“title”);    if (document.getElementById(“han”).value === “” || document.getElementById(“han”).value === “Enter ZHA Number”) {        errorCollection.push(“han”);        valid = false;    } else clearError(“han”);    if (document.

getElementById(“email”).value === “” || document.getElementById(“email”).value === “Enter Email Address”) {        errorCollection.push(“email”);        valid = false;    } else clearError(“email”);    if (!valid) {        for (var i = 0; i < errorCollection.length; i++) {            showError(errorCollectioni);        }    }    return valid;}// this functions are based in the javascript form example in the teacher's websitefunction showError(errorId) {    var er = errorId + "Error";    document.getElementById(er).

style.display = “inline”;}function clearError(errorId) {    var er = errorId + “Error”;    document.getElementById(er).style.display = “none”;}// Here I introduce the error messages through an innerHTML.

Based in the javascript form example in teacher’s website.function validValueFields(firstName, lastName, han, email, telephoneNumber) {    var valid = true;    var firstName = document.getElementById(firstName).value;    var lastName = document.getElementById(lastName).value;    var han = document.getElementById(han).

value;    var email = document.getElementById(email).value;    var telephoneNumber = document.getElementById(telephoneNumber).value;    var firstNameRegex = /^(?=.{2,})a-zA-Z+$/.

test(firstName);    var lastNameRegex = /^((?=.{2,})a-zA-Z-+$)/.test(lastName);    var hanRegex = /^(ZzHhAa)0-9{6}$/.test(han);    var emailRegex = /^w.

[email protected](w-+.)+a-zA-Z+$/.test(email);    var telephoneNumberRegex = /^0-9+$/.test(telephoneNumber);    if (!firstNameRegex) {        document.getElementById(“firstNameValueError”).innerHTML = ” First name must be at least two characters. Numbers and other characters aren’t allowed.

“;        valid = false;    } else document.getElementById(“firstNameValueError”).innerHTML = ”;    if (!lastNameRegex) {        document.getElementById(“lastNameValueError”).innerHTML = “Last Name must be at least two characters.

Numbers and other characters aren’t allowed (except hyphens).”;        valid = false;    } else document.getElementById(“lastNameValueError”).innerHTML = ”;        if (!hanRegex) {        document.

getElementById(“hanValueError”).innerHTML = “Please enter a valid Health Authority Number (e.g. ZHA346783)”;        valid = false;    } else document.

getElementById(“hanValueError”).innerHTML = ”;    if (!emailRegex) {        document.getElementById(“emailValueError”).innerHTML = “Please enter a valid Email adress”;        valid = false;    } else document.getElementById(“emailValueError”).innerHTML = ”;    if (!telephoneNumberRegex) {        document.getElementById(“telephoneNumberValueError”).innerHTML = “Please enter a valid Telephone Number”;        valid = false;    } else document.

getElementById(“telephoneNumberValueError”).innerHTML = ”;    return valid;}// DEFAULT TEXT // I use getElementByClassName and I set default text to each control through a for loop. Based in code seen in session 8.function hint() {     var txtElem = document.getElementsByClassName(“defaulttext”);    for(var i=0; i

value = defaultTexti;    txtElemi.style.color = “#A8A8A8”;    txtElemi.style.fontStyle = “italic”;    txtElemi.

defaultText= defaultTexti;    txtElemi.onfocus = function() {        if (this.value === this.defaultText) {            this.value = “”;            this.

style.color = “#000”;            this.style.

fontStyle = “normal”;  } };    txtElem.onblur = function() {        if (this.value === “”) {            this.value = this.defaultText;            this.style.

color = “#A8A8A8”;            this.style.fontStyle = “italic”;  }};}}// SET FOCUS // I set the focus on the first name (based on the code in session 7)function setFocus () { var focusElem = document.getElementById(“firstName”);  focusElem.focus();}// TOOLTIP // Here I set the tooltip (based on the code in session 5)    function switchToolTip() {    document.getElementById(‘qmark’).

onmouseover = function() {        var toolTip = document.getElementById(‘ttip’);        toolTip.style.display = ‘block’;    }    document.getElementById(‘qmark’).

onmouseout = function() {        var toolTip = document.getElementById(‘ttip’);        toolTip.style.display = ‘none’;    }}window.

onload = init;/* I’ve used information from many different websites, youtube tutorials and forums. Some of the websites used have been:stackoverflow.com, javascript-coder.com, w3resource.com, codepen.io, w3schools.com, msdn.microsoft.com, javatpoint.com, developer.mozilla.org, ejemplocodigo.com etc.*/