<!doctype html>
<html>
<head>
<title>Input Type Email versus Regex - RJM Programming - May, 2019</title>
<style>

input { padding: 5px 5px 5px 5px; background-color: yellow; }

th { background-color: pink; }

#iemail:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#iemail:invalid:after {
content: ' is an invalid email address';
}

#iemail:valid {
border: 2px solid black;
}

#jemail {
border: 2px solid black;
}

#iipn:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#iipninvalid:after {
content: ' is an invalid telephone number';
}

#iipn:valid {
border: 2px solid black;
}

#jipn {
border: 2px solid black;
}

#iurl:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#iurl:invalid:after {
content: ' is an invalid absolute url';
}

#iurl:valid {
border: 2px solid black;
}

#jurl {
border: 2px solid black;
}

#inbr:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#inbr:invalid:after {
content: ' is an invalid number';
}

#inbr:valid {
border: 2px solid black;
}

#jnbr {
border: 2px solid black;
}

</style>
<script type='text/javascript'>

var emailp='', urlp='', nbrp='', ipnp='';
var emaill='', urll='', nbrl='', ipnl='';
var iai=' is an invalid ';
var emailr=null, urlr=null, nbrr=null, ipnr=null;

function clkchk(iois) {
if (iai == '') { iai=' is an invalid '; }
if (iois.value == '' && iois.placeholder.indexOf(iai) != -1) {
iois.value=iois.placeholder.split(iai)[0];
} else if (iois.value.indexOf(iai) != -1) {
iois.value=iois.value.split(iai)[0];
}
}

function huhnbr(inw,isb) {
var isok=false;
if (iai == '') { iai=' is an invalid '; }
if (nbrp == '') { nbrp=inw.placeholder; }
if (inw.value != '') {
// https://www.w3resource.com/javascript-exercises/javascript-regexp-exercise-9.php
isok=inw.value.match(/^[0-9-.]*$/);
if (!isok) {
inw.style.border='2px dashed red';
//alert(inw.value + ' is not a valid email address');
if (isb) {
nbrl=inw.value;
inw.placeholder=inw.value + iai + 'number';
inw.value='';
}
} else {
if (isb) { inw.placeholder=nbrp; }
inw.style.border='2px solid black';
}
} else if (inw.placeholder.indexOf(iai) != -1 && inw.value != '') {
inw.style.border='2px dashed red';
} else {
if (!isb && inw.value == '') { inw.placeholder=nbrp; }
inw.style.border='2px solid black';
}
return isok;
}


function huhurl(inw,isb) {
var isok=false;
if (iai == '') { iai=' is an invalid '; }
if (urlp == '') { urlp=inw.placeholder; }
if (inw.value != '') {
// https://www.w3resource.com/javascript-exercises/javascript-regexp-exercise-9.php
isok=inw.value.match(/^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/);
if (!isok) {
inw.style.border='2px dashed red';
//alert(inw.value + ' is not a valid email address');
if (isb) {
urll=inw.value;
inw.placeholder=inw.value + iai + 'absolute url';
inw.value='';
}
} else {
if (isb) { inw.placeholder=urlp; }
inw.style.border='2px solid black';
}
} else if (inw.placeholder.indexOf(iai) != -1 && inw.value != '') {
inw.style.border='2px dashed red';
} else {
if (!isb && inw.value == '') { inw.placeholder=urlp; }
inw.style.border='2px solid black';
}
return isok;
}



function huhipn(inw,isb) {
var isok=false;
if (iai == '') { iai=' is an invalid '; }
if (ipnp == '') { ipnp=inw.placeholder; }
if (inw.value != '') {
// https://www.w3resource.com/javascript/form/phone-no-validation.php
isok=inw.value.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) || inw.value.match(/^\d{10}$/) || inw.value.match(/^\d{11}$/);
if (!isok) {
inw.style.border='2px dashed red';
//alert(inw.value + ' is not a valid email address');
if (isb) {
ipnl=inw.value;
inw.placeholder=inw.value + iai + 'telephone number';
inw.value='';
}
} else {
if (isb) { inw.placeholder=ipnp; }
inw.style.border='2px solid black';
}
} else if (inw.placeholder.indexOf(iai) != -1 && inw.value != '') {
inw.style.border='2px dashed red';
} else {
if (!isb && inw.value == '') { inw.placeholder=ipnp; }
inw.style.border='2px solid black';
}
return isok;
}


function huhemail(inw,isb) {
var isok=false;
if (iai == '') { iai=' is an invalid '; }
if (emailp == '') { emailp=inw.placeholder; }
if (inw.value != '') {
//isok=inw.value.match(/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/); // thanks to www.regexlib.com/Search.aspx?k=email
// ... versus ... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
isok=inw.value.match(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
if (!isok) {
inw.style.border='2px dashed red';
//alert(inw.value + ' is not a valid email address');
if (isb) {
emaill=inw.value;
inw.placeholder=inw.value + iai + 'email address';
inw.value='';
}
} else {
if (isb) { inw.placeholder=emailp; }
inw.style.border='2px solid black';
}
} else if (inw.placeholder.indexOf(iai) != -1 && inw.value != '') {
inw.style.border='2px dashed red';
} else {
if (!isb && inw.value == '') { inw.placeholder=emailp; }
inw.style.border='2px solid black';
}
return isok;
}

function tpi(iois) {
if (iai == '') { iai=' is an invalid '; }
if (iois.id.indexOf('email') != -1) {
if (emailr == null) { emailr=iois.getBoundingClientRect(); }
if (emailp == '') { emailp=iois.placeholder; }
if (iois.value == '') { iois.placeholder=emailp; }
} else if (iois.id.indexOf('ipn') != -1) {
if (ipnr == null) { ipnr=iois.getBoundingClientRect(); }
if (ipnp == '') { ipnp=iois.placeholder; }
if (iois.value == '') { iois.placeholder=ipnp; }
} else if (iois.id.indexOf('url') != -1) {
if (urlr == null) { urlr=iois.getBoundingClientRect(); }
if (urlp == '') { urlp=iois.placeholder; }
if (iois.value == '') { iois.placeholder=urlp; }
} else if (iois.id.indexOf('nbr') != -1) {
if (nbrr == null) { nbrr=iois.getBoundingClientRect(); }
if (nbrp == '') { nbrp=iois.placeholder; }
if (iois.value == '') { iois.placeholder=nbrp; }
//document.title=iois.value;
}
if (iois.value != '') {
iois.placeholder=iois.value;
}
}

function chkemail() {
if (iai == '') { iai=' is an invalid '; }
if (document.getElementById('iemail').value.indexOf(iai) == 0) {
document.getElementById('iemail').value=document.getElementById('iemail').value.replace(iai, document.getElementById('iemail').placeholder + iai);
} else if (('' + document.getElementById('iemail').style.border).indexOf(' dashed ') != -1) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
} else if (emailr != null) {
var vsemailr=document.getElementById('iemail').getBoundingClientRect();
if (vsemailr.width != emailr.width) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
document.getElementById('iemail').style.maxWidth=emailr.width; //'100%';
}
} else if (emailp != '') {
document.getElementById('iemail').placeholder=emailp;
}
}

function chkipn() {
if (iai == '') { iai=' is an invalid '; }
if (document.getElementById('iipn').value.indexOf(iai) == 0) {
document.getElementById('iipn').value=document.getElementById('iipn').value.replace(iai, document.getElementById('iipn').placeholder + iai);
} else if (('' + document.getElementById('iipn').style.border).indexOf(' dashed ') != -1) {
document.getElementById('iipn').value=document.getElementById('iipn').placeholder + iai + 'telephone number';
} else if (ipnr != null) {
var vsipnr=document.getElementById('iipn').getBoundingClientRect();
if (vsipnr.width != ipnr.width) {
document.getElementById('iipn').value=document.getElementById('iipn').placeholder + iai + 'telephone number';
document.getElementById('iipn').style.maxWidth=ipnr.width; //'100%';
}
} else if (ipnp != '') {
document.getElementById('iipn').placeholder=ipnp;
}
}

function chkurl() {
if (iai == '') { iai=' is an invalid '; }
if (document.getElementById('iurl').value.indexOf(iai) == 0) {
document.getElementById('iurl').value=document.getElementById('iurl').value.replace(iai, document.getElementById('iurl').placeholder + iai);
} else if (('' + document.getElementById('iurl').style.border).indexOf(' dashed ') != -1) {
document.getElementById('iurl').value=document.getElementById('iurl').placeholder + iai + 'absolute url';
} else if (urlr != null) {
var vsurlr=document.getElementById('iurl').getBoundingClientRect();
if (vsurlr.width != urlr.width) {
document.getElementById('iurl').value=document.getElementById('iurl').placeholder + iai + 'absolute url';
document.getElementById('iurl').style.maxWidth=urlr.width; //'100%';
}
} else if (urlp != '') {
document.getElementById('iurl').placeholder=urlp;
}
}

function chknbr() {
if (iai == '') { iai=' is an invalid '; }
//alert(1);
var jisok=true;
if (document.getElementById('inbr').value != '') {
jisok=document.getElementById('inbr').value.match(/^[0-9-.]*$/);
} else if (document.getElementById('inbr').placeholder != '') {
jisok=document.getElementById('inbr').placeholder.match(/^[0-9-.]*$/);
}
if (!jisok && document.getElementById('inbr').placeholder.indexOf(iai) == -1) {
document.getElementById('inbr').placeholder+=iai + 'number';
document.getElementById('inbr').style.border='2px dashed red';
}
if (document.getElementById('inbr').placeholder.indexOf(iai) == 0) {
//alert(11);
//document.title='36';
document.getElementById('inbr').value=document.getElementById('inbr').placeholder.split(iai)[0];
} else if (('' + document.getElementById('inbr').style.border).indexOf(' dashed ') != -1) {
//alert(111);
//document.title='32';
document.getElementById('inbr').value=document.getElementById('inbr').placeholder + iai + 'number';
} else if (nbrr != null) {
var vsnbrr=document.getElementById('inbr').getBoundingClientRect();
if (vsnbrr.width != nbrr.width) {
//document.getElementById('inbr').placeholder=document.getElementById('inbr').value + iai + 'number';
//document.title='3';
document.getElementById('inbr').value=document.getElementById('inbr').placeholder + iai + 'number';
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder + iai + 'number';
//document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder + iai + 'number';
document.getElementById('inbr').style.maxWidth=nbrr.width; //'100%';
document.getElementById('inbr').style.border='2px dashed red';
}
} else if (nbrp != '') {
document.getElementById('inbr').placeholder=nbrp;
document.getElementById('inbr').style.border='2px solid black';
}
}


function ktpi(eiois) {
if ((eiois.which || eiois.keyCode) == 8) {
document.getElementById('inbr').placeholder='';
} else if ((eiois.which || eiois.keyCode) == 186 || (eiois.which || eiois.keyCode) == 900000016) {
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder;
} else if ((eiois.which || eiois.keyCode) < 32) { // && (eiois.which || eiois.keyCode) != 32) { // || (eiois.which || eiois.keyCode) > 58) {
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder;
} else {
if (document.getElementById('inbr').placeholder.indexOf(iai) != -1) { document.getElementById('inbr').placeholder=nbrp; }
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder.replace(nbrp,'') + String.fromCharCode(eiois.which || eiois.keyCode);
}
return true;
}

function adde() {
document.getElementById('inbr').addEventListener('keypress', function (event) {
if ((event.which || event.keyCode) == 8) {
document.getElementById('inbr').placeholder='';
} else if ((event.which || event.keyCode) == 186 || (event.which || event.keyCode) == 900000016) {
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder;
} else if ((event.which || event.keyCode) < 32) { // && (event.which || event.keyCode) != 32) { // || (event.which || event.keyCode) > 58) {
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder;
} else {
if (document.getElementById('inbr').placeholder.indexOf(iai) != -1) { document.getElementById('inbr').placeholder=nbrp; }
document.getElementById('inbr').placeholder=document.getElementById('inbr').placeholder.replace(nbrp,'') + String.fromCharCode(event.which || event.keyCode);
}
return true;
});
}


</script>
</head>
<body onload="if (1 == 2) { adde(); } if (nbrr == null) { if (nbrp == '') { nbrp=document.getElementById('inbr').placeholder; } nbrr=document.getElementById('inbr').getBoundingClientRect(); } ">
<br>
<h1>Input Type Email/Tel/URL/Number versus Regex Client Validation</h1>

<h3>RJM Programming - May, 2019</h3>

<table style='width:100%;' border=20 cellpadding=10 cellspacing=10>
<tbody>
<tr><th>Input Type Email</th><th>Regex</th></tr>
<tr><td><input onclick="clkchk(this);" onkeydown=tpi(this); onkeypress=tpi(this); onblur="tpi(this); setTimeout(chkemail,1200);" id=iemail style='width:100%;' type=email placeholder="Input Type Email" value=""></input></td><td><input onclick="clkchk(this);" onkeydown="huhemail(this,false);" onkeypress="huhemail(this,false);" id=jemail style='width:100%;' onblur="huhemail(this,true);" type=text placeholder="Input Type Email" value=""></input></td></tr>
<tr><th>Input Type Telephone Number</th><th>Regex</th></tr>
<tr><td><input onclick="clkchk(this);" onkeydown=tpi(this); onkeypress=tpi(this); onblur="tpi(this); setTimeout(chkipn,1200);" pattern='^[0-9-+s()]*$' title='This one only nominally validates on Safari' id=iipn style='width:100%;' type=tel placeholder="Input Type Telephone Number [+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx, xxxxxxxxxx, xxxxxxxxxxx]" value=""></input></td><td><input onclick="clkchk(this);" onkeydown="huhipn(this,false);" onkeypress="huhipn(this,false);" id=jipn style='width:100%;' onblur="huhipn(this,true);" type=text placeholder="Input Type Telephone Number [+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx, xxxxxxxxxx, xxxxxxxxxxx]" value=""></input></td></tr>
<tr><th>Input Type Absolute URL</th><th>Regex</th></tr>
<tr><td><input onclick="clkchk(this);" onkeydown=tpi(this); onkeypress=tpi(this); onblur="tpi(this); setTimeout(chkurl,1200);" id=iurl style='width:100%;' type=url placeholder="Input Type Absolute URL" value=""></input></td><td><input onclick="clkchk(this);" onkeydown="huhurl(this,false);" onkeypress="huhurl(this,false);" id=jurl style='width:100%;' onblur="huhurl(this,true);" type=text placeholder="Input Type Absolute URL" value=""></input></td></tr>
<tr><th>Input Type Number</th><th>Regex</th></tr>
<tr><td><input onclick="if (this.value == '' && nbrp != '') { this.placeholder=nbrp; this.style.border='2px solid black'; } else if (1 == 5) { clkchk(this); }" onkeypress=ktpi(event); onblur="setTimeout(chknbr,1200);" id=inbr style='width:100%;' type=number placeholder="Input Type Number" value="" step=0.000001 data-step=0.000000001></input></td><td><input onclick="clkchk(this);" onkeydown="huhnbr(this,false);" onkeypress="huhnbr(this,false);" id=jurl style='width:100%;' onblur="huhnbr(this,true);" type=text placeholder="Input Type Number" value=""></input></td></tr>
</tbody>
</table>
<input type=text style='position:absolute;top:-200px;left:-200px;'></input>
</body>
</html>