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
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.
-+@(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.*/
