<!doctype html>
<html>
<head>
<title>HTML5 Form Constraint Validation Example - RJM Programming - October, 2017</title>
<script type='text/javascript'>
function before() {
var ii=1;
if (document.getElementById('currency_code').value != '') {
ii=ii;
} else if (document.getElementById('country_code_2').value != '') {
ii=ii;
} else if (document.getElementById('country_code_3').value != '') {
ii=ii;
} else if (document.getElementById('country_numerical').value != '') {
ii=ii;
} else {
document.getElementById('currency_code').setCustomValidity('Invalid Currency Code');
document.getElementById('currency_code').validity.customError;
document.getElementById('country_code_2').setCustomValidity('Invalid ISO Two Letter Country Code');
document.getElementById('country_code_2').validity.customError;
document.getElementById('country_code_3').setCustomValidity('Invalid ISO Three Letter Country Code');
document.getElementById('country_code_3').validity.customError;
document.getElementById('country_numerical').setCustomValidity('Invalid ISO Country Number');
document.getElementById('country_numerical').validity.customError;
}
}
function lastCheck(oform) {
if (document.getElementById('currency_code').value != '') {
window.open('//www.xe.com/currency/' + document.getElementById('currency_code').value.toUpperCase(), '_blank', 'top=200,left=400,width=500,height=400');
document.getElementById('currency_code').value='';
} else if (document.getElementById('country_code_2').value != '') {
window.open('//www.iso.org/obp/ui/#iso:code:3166:' + document.getElementById('country_code_2').value.toUpperCase(), '_blank', 'top=200,left=400,width=500,height=400');
document.getElementById('country_code_2').value='';
} else if (document.getElementById('country_code_3').value != '') {
window.open('//en.wikipedia.org/wiki/ISO_3166-1_alpha-3#Current_codes', '_blank', 'top=200,left=400,width=500,height=400');
document.getElementById('country_code_3').value='';
} else if (document.getElementById('country_numerical').value != '') {
window.open('//en.wikipedia.org/wiki/ISO_3166-1_numeric#Current_codes', '_blank', 'top=200,left=400,width=500,height=400');
document.getElementById('country_numerical').value='';
}
return true;
}
function checkinpid() {
var inask=location.search.split('inpid=')[1] ? location.search.split('inpid=')[1].split('&')[0] : '';
if (inask != '') {
document.getElementById('realform').style.display='block';
document.getElementById('firstcheck').style.display='none';
document.getElementById('myid').value=decodeURIComponent(inask);
} else if ((location.search.split('myid=')[1] ? location.search.split('myid=')[1].split('&')[0] : '') != '') {
document.getElementById('realform').style.display='block';
document.getElementById('firstcheck').style.display='none';
document.getElementById('myid').value=decodeURIComponent((location.search.split('myid=')[1] ? location.search.split('myid=')[1].split('&')[0] : ''));
}
}
</script>
</head>
<body onload='checkinpid();'>
<h1>Currency Code and Country Code Lookup</h1>
<h3>RJM Programming - October, 2017</h3>
<h4>Thanks to <a target=_blank title='Making Forms Fabulous with HTML5 - HTML5 Rocks' href='https://www.html5rocks.com/en/tutorials/forms/html5forms/'>Making Forms Fabulous with HTML5 - HTML5 Rocks</a></h4>
<form style='display:block;' id='firstcheck' role="form" novalidate action='./html5_form_constraint_validation.html' method='GET'>
<label for="inpid">ID (if not blank) Proceeds</label>
<input onblur="if (this.value.length > 0) { location.href=document.URL.split('?')[0].split('#')[0] + '?inpid=' + encodeURIComponent(this.value); } " style='width:30%;' type="text" id="inpid" name='inpid' placeholder="Enter ID (if not blank) Proceeds">
</form>
<form style='display:none;' id='realform' onsubmit='lastCheck(this);' action='#' method='GET'>
<br>Identifier: <input style='width:30%;' type='text' id='myid' name='myid' required></input>
<br>Currency code: <input max="zzz" min="AAA" type="text" id="currency_code" name="currency_code" pattern="[A-Za-z]{3}" title="Three letter currency code"></input>
<br>ISO Two Letter Country code: <input max="zz" min="AA" type="text" id="country_code_2" name="country_code_2" pattern="[A-Za-z]{2}" title="ISO Two letter country code"></input>
<br>ISO Three Letter Country code: <input max="zzz" min="AAA" type="text" id="country_code_3" name="country_code_3" pattern="[A-Za-z]{3}" title="ISO Three letter country code"></input>
<br>ISO Numerical Country code: <input style='width:10%;' max="999" min="000" type="number" step="1" id="country_numerical" name="country_numerical" pattern="[0-9]{3}" title="ISO Numerical country code"></input>
<br><br><input onclick="before();" type='submit' value='Submit'></input>
</form>
</body>
</html>