update 1811211040
This commit is contained in:
vkservicesllc
33
dummy-form/forms/user.html
Normal file
33
dummy-form/forms/user.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<title>New User Registration</title>
|
||||||
|
<meta name="author" content="VK Services, LLC">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../img/icons/main.ico">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../styles/forms/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<fieldset>
|
||||||
|
<legend align="center">New User Registration</legend>
|
||||||
|
<form action="" method="post">
|
||||||
|
<label class="subLab" for="acs">Autocorrector</label><input type="checkbox" id="acs" checked><br />
|
||||||
|
<label for="fn">First (Real) Name</label><input type="text" id="fn" name="firstName"><br />
|
||||||
|
<label for="sn">Pseudo Name</label><input type="text" id="sn" name="pseudoName"><br />
|
||||||
|
<label for="ln">Last Name</label><input type="text" id="ln" name="lastName"><br />
|
||||||
|
<p id="acm"></p>
|
||||||
|
<label for="un">User Name</label><input type="text" id="un" name="userName"><br />
|
||||||
|
<label for="em">Email</label><input type="text" id="em" name="email"><br />
|
||||||
|
<label for="pw">Password</label><input type="password" id="pw" name="password"><br />
|
||||||
|
<label for="pc">Confirmation</label><input type="password" id="pc"><br />
|
||||||
|
<label>Department / Position</label>
|
||||||
|
<select id="slct" name="position">
|
||||||
|
<option selected disabled hidden>select title</option>
|
||||||
|
</select>
|
||||||
|
<!-- <button type="button">Sign up</button> -->
|
||||||
|
</form>
|
||||||
|
</fieldset>
|
||||||
|
<script src="../functionality/form-user.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
165
dummy-form/functionality/form-user.js
Normal file
165
dummy-form/functionality/form-user.js
Normal file
@@ -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 = `<span>ONLY</span> if auto capitalization of non-boundary character occured in error,<br>
|
||||||
|
unselect Autocorrector option at the top of the form and make corrections in text manually`,
|
||||||
|
cont = '';
|
||||||
|
if (bln) cont = msg;
|
||||||
|
msgCont.innerHTML = cont;
|
||||||
|
}
|
||||||
BIN
dummy-form/img/icons/main.ico
Normal file
BIN
dummy-form/img/icons/main.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
132
dummy-form/styles/forms/style.css
Normal file
132
dummy-form/styles/forms/style.css
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
@import url('../reset_EM-2.0.css');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Abel|Prompt|Roboto+Condensed|Ubuntu');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Basic */
|
||||||
|
|
||||||
|
* {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
width: 740px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: rgb(240,240,240);
|
||||||
|
font-family: 'Abel', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Fieldset */
|
||||||
|
|
||||||
|
fieldset, legend {
|
||||||
|
box-shadow: 0 0 9px gray;
|
||||||
|
border: 1px solid gray;
|
||||||
|
background: rgb(232,232,232);
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
margin-top: 67px;
|
||||||
|
border-radius: 9px;
|
||||||
|
padding: 45px 57px;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
border-radius: 15px 5px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
text-shadow: 0 0 2px gray;
|
||||||
|
font-family: 'Prompt', sans-serif;
|
||||||
|
font-size: 112%;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Labels */
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
width: 150px;
|
||||||
|
padding-right: 12px;
|
||||||
|
text-shadow: 0 0 1px gray;
|
||||||
|
font-family: 'Roboto Condensed', sans-serif;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.subLab {
|
||||||
|
font-size: 69%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Inputs & Select*/
|
||||||
|
|
||||||
|
input[type=text],
|
||||||
|
input[type=email],
|
||||||
|
input[type=password],
|
||||||
|
select {
|
||||||
|
width: 320px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
border: 1px solid gray;
|
||||||
|
box-shadow: inset 0 0 2px gray;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
background: rgb(248,248,248);
|
||||||
|
color: blue;
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
font-size: 112%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
input[type=checkbox] {
|
||||||
|
cursor: auto;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
left: -3px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
height: 42px;
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
option {
|
||||||
|
color: blue;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
::placeholder, .placeholder {
|
||||||
|
color: #00e6e6;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
::placeholder {
|
||||||
|
font-size: 87%;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
input:focus, select:focus {
|
||||||
|
outline: none;
|
||||||
|
background: #e6f0ff;
|
||||||
|
}
|
||||||
|
input:focus:not([type=checkbox]) {
|
||||||
|
border: 1px solid blue;
|
||||||
|
box-shadow: inset 0 0 4px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Misc */
|
||||||
|
|
||||||
|
#acm {
|
||||||
|
padding: 0 4px 24px 132px;
|
||||||
|
color: gray;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
#acm span {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**/
|
||||||
58
dummy-form/styles/reset_EM-2.0.css
Normal file
58
dummy-form/styles/reset_EM-2.0.css
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
/* vertical-align: baseline; - VKS */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* VKS */
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user