<!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;
}

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

#jemail {
border: 2px solid black;
}

#iipn:invalid {
border: 2px dashed red;
}

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

#jipn {
border: 2px solid black;
}

#iurl:invalid {
border: 2px dashed red;
}

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

#jurl {
border: 2px solid black;
}

#inbr:invalid {
border: 2px dashed red;
}

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

#jnbr {
border: 2px solid black;
}

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

function huhnbr(inw) {
var isok=false;
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');
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

function huhurl(inw) {
var isok=false;
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');
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

function huhipn(inw) {
var isok=false;
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');
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

function huhemail(inw) {
var isok=false;
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');
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

</script>
</head>
<body>
<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 id=iemail style='width:100%;' type=email placeholder="Input Type Email" value=""></input></td><td><input onkeydown="huhemail(this);" onkeypress="huhemail(this);" id=jemail style='width:100%;' onblur="huhemail(this);" type=text placeholder="Input Type Email" value=""></input></td></tr>
<tr><th>Input Type Telephone Number</th><th>Regex</th></tr>
<tr><td><input pattern='^[0-9-+s()]*$' title='This onle 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 onkeydown="huhipn(this);" onkeypress="huhipn(this);" id=jipn style='width:100%;' onblur="huhipn(this);" 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 id=iurl style='width:100%;' type=url placeholder="Input Type Absolute URL" value=""></input></td><td><input onkeydown="huhurl(this);" onkeypress="huhurl(this);" id=jurl style='width:100%;' onblur="huhurl(this);" type=text placeholder="Input Type Absolute URL" value=""></input></td></tr>
<tr><th>Input Type Number</th><th>Regex</th></tr>
<tr><td><input id=inbr style='width:100%;' type=number placeholder="Input Type Number" value=""></input></td><td><input onkeydown="huhnbr(this);" onkeypress="huhnbr(this);" id=jurl style='width:100%;' onblur="huhnbr(this);" 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>