From fe801398ea66101aa7be1d987df81bbcca20b82a Mon Sep 17 00:00:00 2001 From: vkservicesllc <35149642+vkservicesllc@users.noreply.github.com> Date: Wed, 21 Nov 2018 10:40:50 -0500 Subject: [PATCH] update 1811211040 --- dummy-form/forms/user.html | 33 ++++++ dummy-form/functionality/form-user.js | 165 ++++++++++++++++++++++++++ dummy-form/img/icons/main.ico | Bin 0 -> 6332 bytes dummy-form/styles/forms/style.css | 132 +++++++++++++++++++++ dummy-form/styles/reset_EM-2.0.css | 58 +++++++++ 5 files changed, 388 insertions(+) create mode 100644 dummy-form/forms/user.html create mode 100644 dummy-form/functionality/form-user.js create mode 100644 dummy-form/img/icons/main.ico create mode 100644 dummy-form/styles/forms/style.css create mode 100644 dummy-form/styles/reset_EM-2.0.css diff --git a/dummy-form/forms/user.html b/dummy-form/forms/user.html new file mode 100644 index 0000000..091ef3f --- /dev/null +++ b/dummy-form/forms/user.html @@ -0,0 +1,33 @@ + + + + New User Registration + + + + + + + +
+ New User Registration +
+
+
+
+
+

+
+
+
+
+ + + +
+
+ + + diff --git a/dummy-form/functionality/form-user.js b/dummy-form/functionality/form-user.js new file mode 100644 index 0000000..f07d257 --- /dev/null +++ b/dummy-form/functionality/form-user.js @@ -0,0 +1,165 @@ +let inputs = { + ids: ['fn', 'sn', 'ln', 'un', 'em', 'pw', 'pc'], + placeholders: [ + ' e.g. John', ' e.g. "Roy"', ' e.g. McClane', ' e.g. john-mcclane', + ' e.g. john-mcclane@domain.hollywood', ' don\'t make it simple', ' confirm password' + ] + }, + inp = [], + acs = document.getElementById('acs'), + slct = document.getElementById('slct'); +let selOptions = { + dispatcher: 'Dispatcher', + safety: 'Safety', + hr: 'HR', + ifta: 'IFTA', + accounting: 'Accounting', + expense: 'Expense', +}; +for (let i = 0; i < inputs.ids.length; i++) + inp[i] = document.getElementById(inputs.ids[i]); + +window.onload = ()=> { + for (let p = 0; p < inputs.placeholders.length; p++) + inp[p].setAttribute('placeholder', inputs.placeholders[p]); + slct.setAttribute('class', 'placeholder'); + let optKeys = Object.keys(selOptions), + selLen = optKeys.length; + for (let o = 0; o < selLen; o++) { + let optEl = document.createElement('option'); + optEl.setAttribute('value', optKeys[o]); + let optTxtNd = document.createTextNode(selOptions[optKeys[o]]); + optEl.appendChild(optTxtNd); + slct.appendChild(optEl); + } +}; + +inp[0].addEventListener('input', (e)=> {processName(e, false);}); +inp[1].addEventListener('input', (e)=> {processName(e, false, true);}); +inp[2].addEventListener('input', (e)=> {processName(e, true);}); +inp[3].addEventListener('input', (e)=> { + let target = e.target, + value = target.value; + if (value) + value = value.toLowerCase() + .replace(/[\s`~!@#\$%\^&\*\(\)=\+\[\{\]\}\\\|;:'",<\.>\/\?]/g, '') + .slice(0, 12); + target.value = value; +}); +inp[4].addEventListener('blur', (e)=> { + let target = e.target, + value = target.value; + if (value) { + let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + if (re.test(value.toLowerCase())) { + value = value.toLowerCase(); + } else { + value = ''; + alert( + ` + The email address you entered did not pass + standard email validation test. + Please try again! + ` + ); + target.focus(); + } + target.value = value; + } +}); +acs.addEventListener('click', ()=> { + if (acs.checked) { + inp[0].value = processValue(inp[0].value); + inp[2].value = autoCorrect(processValue(inp[2].value)); + } else { + alert( + 'PLEASE READ\n' + + 'It is advised to keep Autocorrector active,\n' + + 'unless you noticed it had capitalized non-boundary character\n' + + 'that was supposed to remain in lower case!' + ); + showAutoCorrectMsg(false); + } +}); +slct.addEventListener('change', ()=> {slct.removeAttribute('class');}); +for (let i = 0; i < inputs.ids.length; i++) { + let el = inp[i]; + el.onfocus = ()=> { + el.removeAttribute('placeholder'); + let value = el.value, + vLen = value.length; + if (vLen) { + el.setSelectionRange(0, vLen); + } + }; + el.onblur = ()=> { + el.setAttribute('placeholder', inputs.placeholders[i]); + el.value = el.value.trim(); + }; +} + +let processName = (e, lastName, pseudo)=> { + let target = e.target, + value = target.value, + processedValue = ''; + if (value) value = value + .replace(/[\d`~!@#\$%\^&\*\(\)\-_=\+\[\{\]\}\\\|;:",<\.>\/\?]/g, '') + .replace(/\s+/g, ' '); + if (acs.checked) { + if (value) { + processedValue = processValue(value); + } + if (lastName) { + processedValue = autoCorrect(processedValue); + } + } else processedValue = value; + let q = (pseudo && value) ? '"' : ''; + target.value = q + processedValue + q; + if (pseudo) { + let vLen = value.length; + if (vLen) { + target.setSelectionRange(vLen + 1, vLen + 1); + } + } +} +let processValue = (input)=> { + if (input) { + input = input.toLowerCase() + .replace(/\b[a-z]/g, (fC)=> {return fC.toUpperCase();}); + } + return input; +} +let autoCorrect = (input)=> { + if (input) { + switch (true) { + case input.slice(0, 2) == 'Mc': + input = input + .replace(/Mc[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bMC/g, 'Mc');}); + showAutoCorrectMsg(true); + break; + case input.slice(0, 3) == 'Mac': + input = input + .replace(/Mac[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bMAC/g, 'Mac');}); + showAutoCorrectMsg(true); + break; + case input.slice(0, 2) == 'De': + input = input + .replace(/De[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bDE/g, 'De');}); + showAutoCorrectMsg(true); + break; + case input.trim() == '': + showAutoCorrectMsg(false); + break; + default: showAutoCorrectMsg(false); + } + } + return input; +} +let showAutoCorrectMsg = (bln)=> { + let msgCont = document.getElementById('acm'), + msg = `ONLY if auto capitalization of non-boundary character occured in error,
+ unselect Autocorrector option at the top of the form and make corrections in text manually`, + cont = ''; + if (bln) cont = msg; + msgCont.innerHTML = cont; +} diff --git a/dummy-form/img/icons/main.ico b/dummy-form/img/icons/main.ico new file mode 100644 index 0000000000000000000000000000000000000000..7972feeefa205eb2baaf698bd90c6108d914044f GIT binary patch literal 6332 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