| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/CST1022/Resources/Week/14/ |
Upload File : |
"use strict";
function _Initialize() {
let formByName = document.forms.ValidateForm; // Get the form by name.
console.log(`formByName=${formByName}`);
console.log(`formByName id=${formByName.id} name=${formByName.name}`);
let formById = document.getElementById('frmValidate'); // Get the form by id.
console.log(`formById=${formById}`);
console.log(`formById id=${formById.id} name=${formById.name}`);
formById.addEventListener('submit', ValidateForm);
// Get the form elements.
let formElements = formById.elements;
console.log(`formElements=${formElements}`);
// loop thru form elements.
// formElements.forEach(formElement => {
for (let i = 0; i < formElements.length; i++) {
let formElement = formElements[i];
console.log(`\tformElement id=${formElement.id} name=${formElement.name} type=${formElement.type}`);
switch (formElement.type) {
case 'text':
formElement.addEventListener('blur', ValidatFormElement);
formElement.addEventListener('focus', RemoveErrorText);
// ValidatFormElement(formElement);
} // switch formElement.type
}
}
function RemoveErrorText(evtOrElement) {
let DEBUG = true;
console.log(`ValidatFormElement[] id=${(evtOrElement.id)}`);
let fe;
if (typeof evtOrElement.id == 'undefined') {
fe = document.getElementById(evtOrElement.target.id);
} else {
fe = evtOrElement;
}
let spanId = fe.id + '_span';
if (document.getElementById(spanId)) {
document.getElementById(spanId).remove();
}
}
function ValidatFormElement(evt) {
let DEBUG = true;
console.log(`ValidatFormElement[] id=${evt.target.id}`);
let fe = document.getElementById(evt.target.id);
let validParameters = GetValidInformation(fe);
let value = fe.value;
// console.log(`value=${value}`);
let valueLength = value.length;
if (DEBUG) { console.log(`${fe.id} min=${validParameters.min} max=${validParameters.max} length=${valueLength}`); }
let error = false;
let errorText = '';
if (validParameters.min && valueLength < validParameters.min) {
// error
error = `is too short. It must have at least ${validParameters.min} character(s)`;
}
if (validParameters.max && valueLength > validParameters.max) {
error = `is too long. It may have only ${validParameters.max} character(s).`;
}
if (error) {
let errorBegin = fe.previousElementSibling.innerHTML.slice(0, -1);
errorText = `The ` + errorBegin + ` ${error}`;
}
AddErrorText(fe, errorText);
if (DEBUG) { console.log(`errorText=${errorText}`); }
return error;
}
function IsOneSelected(elementList) {
let DEBUG = true;
let oneIsSelected = false;
let elementArray = elementList.split(',');
for (let i = 0; i < elementArray.length; i++) {
let e = document.getElementById(elementArray[i]);
if (DEBUG) { console.log(`e.type=${(e.type)}`); }
switch (e.type) {
case 'checkbox':
if (e.checked) { oneIsSelected = true; }
break;
case 'text':
if (e.value != '') { oneIsSelected = true; }
break;
}
}
return oneIsSelected;
}
function AddErrorText(fe, errorText) {
console.log('RemoveErrorText(fe);');
RemoveErrorText(fe);
let spanId = fe.id + '_span';
let span = document.createElement("SPAN");
span.id = spanId;
span.innerHTML = errorText;
span.className = 'formError';
fe.parentNode.insertBefore(span, fe.nextElementSibling);
}
function GetValidInformation(fe) {
let DEBUG = false;
if (DEBUG) { console.log(`ValidatFormElement[id=${fe.id}]`); }
let validData = fe.dataset.valid;
if (DEBUG) { console.log(`\t${fe.id} validData=${validData}`); }
let min = null;
let max = null;
if (validData) {
[min, max] = validData.split(',');
if (DEBUG) { console.log(`${fe.id} min=${min} max=${max}`); }
}
return { "min": min, "max": max };
}
function ValidateForm(evt) {
// evt.preventDefault();
let submitForm = true;
console.log(`ValidateForm[] id=${evt.target.id}`);
let formById = document.getElementById('frmValidate'); // Get the form by id.
let e;
// validate txtFirstname.
// Create an evt element so we can send an evt.target.id to the ValidatFormElement() function.
let fakeEvent;
fakeEvent = { target:{ id:'txtFirstname' } };
// console.log(`id=${fakeEvent.target.id}`);
if ( ValidatFormElement(fakeEvent) ) {
submitForm = false;
}
// Create an evt element so we can send an evt.target.id to the ValidatFormElement() function.
fakeEvent = { target:{ id:'txtLastname' } };
// console.log(`id=${fakeEvent.target.id}`);
if ( ValidatFormElement(fakeEvent) ) {
submitForm = false;
}
// Validate hobby was checked or entered
let fe = document.getElementById('lblHobbies');
RemoveErrorText(fe);
let oneIsSelected = IsOneSelected('chkGard,chkRead,txtOtherHobby');
if (!oneIsSelected) {
submitForm = false;
AddErrorText(fe, `You must select or enter a hobby.`)
}
if (!submitForm) { evt.preventDefault(); }// Stop form submission.
}