<!doctype html>
<html>
<head>
<title>RegExp Object Validation of HTML Form - RJM Programming - May, 2017</title>
<style>
input { width: 50%; }
div { margin: 5 5 5 5; background-color: lightblue; }
form { margin: 5 5 5 5; background-color: lightgreen; }
h1 { margin: 5 5 5 5; background-color: pink; }
</style>
<script type='text/javascript'>
var image_get = location.search.split('image_url=')[1] ? decodeURIComponent(location.search.split('image_url=')[1].split('&')[0]) : '';
var email_get = location.search.split('email_address=')[1] ? decodeURIComponent(location.search.split('email_address=')[1].split('&')[0]) : '';
var name_get = location.search.split('your_name=')[1] ? decodeURIComponent(location.search.split('your_name=')[1].split('&')[0]) : '';
var image_re = /^(file|https|http):\/\/\S+\/\S+\.(gif|jpg|jpeg|png|bmp|tiff)$/i;
var email_re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var name_re = /\s*\n\s*/;
function regexp_object_validation() {
var okayf=true;
if (okayf) {
okayf = image_re.test(document.getElementById('image_url').value);
if (!okayf) document.getElementById('image_url').style.border = '3px solid red';
}
if (okayf) {
okayf = email_re.test(document.getElementById('email_address').value);
if (!okayf) document.getElementById('email_address').style.border = '3px solid red';
}
if (okayf) {
okayf = name_re.test(document.getElementById('your_name').value);
if (!okayf) document.getElementById('your_name').style.border = '3px solid red';
}
return okayf;
}
function doresults() {
if (image_get != '') {
document.getElementById('image_url').value = image_get.replace(/\+/g,' ');
document.getElementById('results').innerHTML += 'Last Image URL: <a target="_blank" href="' + image_get.replace(/\+/g,' ') + '" title="URL to">' + image_get.replace(/\+/g,' ') + '</a><br><br>';
document.body.style.backgroundImage = 'url("' + image_get.replace(/\+/g,' ') + '")';
}
if (email_get != '') {
document.getElementById('email_address').value = email_get.replace(/\+/g,' ');
document.getElementById('results').innerHTML += 'Last Email Address: <a id="emailto" href="mailto:' + email_get.replace(/\+/g,' ') + '" title="Email to">' + email_get.replace(/\+/g,' ') + '</a><br><br>';
}
if (name_get != '') {
var outname='', m=0, outnames=[], newname='', delim='';
var thisnamelist = name_get.replace(/\+/g,' ').split(name_re);
var namesplit_re = /(\S+)\s(\S+)/;
for (m=0; m<thisnamelist.length; m++) {
outnames[m] = thisnamelist[m].replace(namesplit_re, "$2, $1");
}
for (m=0; m<thisnamelist.length; m++) {
if ((outnames[m] + ' ').substring(0,1).toUpperCase() != (outnames[m] + ' ').substring(0,1)) {
newname += delim + (outnames[m] + ' ').substring(0,1).toUpperCase() + (outnames[m] + ' ').substring(1);
} else {
newname += delim + outnames[m];
}
delim = "\n";
if (document.getElementById('howdy').innerHTML == '') {
document.getElementById('howdy').innerHTML = 'Howdy ' + newname.trim() + ' ...';
if (email_get != '') {
document.getElementById('emailto').href += '?subject=Hello&body=' + encodeURIComponent(document.getElementById('howdy').innerHTML);
}
}
}
document.getElementById('your_name').value = newname;
document.getElementById('results').innerHTML += 'Email To Name: ' + newname + '<br><br>';
}
if (document.getElementById('results').innerHTML != '') document.getElementById('results').innerHTML += "<hr>";
}
</script>
</head>
<body style='background-color:yellow;' onload='doresults();'>
<h1>RegExp Object Validation of HTML Form</h1>
<div id='results'>
<div id='howdy'></div><br>
</div>
<form onsubmit='return regexp_object_validation();' action='./regexp_object_validation.html' method='GET'>
<br><br>
Image URL *: <input id='image_url' name='image_url' value='' title='Has to be gif or jpeg or png or bmp or tiff'></input><br><br>
Email Address *: <input id='email_address' name='email_address' value='' title='Has to be filled in'></input><br><br>
Email To Name *: <textarea rows=2 cols=80 id='your_name' name='your_name' value='' title='Two words on two lines please'></textarea><br><br>
<input style='background-color: orange;' type='submit' value='Show Information'></input><br><br>
</form>
</body>
</html>