<html>
<head>
<title>Test oninvalid and setCustomValidity and Input pattern attribute - RJM Programming - February, 2021 ... thanks to https://stackoverflow.com/questions/21784152/how-to-combine-inputafterfocus-pure-css and https://stackoverflow.com/questions/3286991/can-a-before-selector-be-used-with-a-textarea</title>
<style>
h1::after {
content: attr(title);
color: #FFF;
}
#integerlist {
position: relative;
width: 90%;
}
#integerlist:invalid {
border-color: red;
}
#integerlist:invalid::after {
content: '' attr(title) '';
color: #FFF;
position: absolute;
left: 40%;
top: 0px;
}
#integerlist:focus-within::after {
content: '' attr(title) '';
color: #FFF;
position: absolute;
right: 550px;
top: 20px;
}

</style>
<script type='text/javascript'>
var retval='';
var validilist='';

function postonl() {
document.getElementById('integerlist').setCustomValidity('');
}

function onl() {
if (('' + location.hash) != '') {
document.getElementById('integerlist').title='Regarding your invalid entry of ' + decodeURIComponent('' + location.hash).replace('#','') + ', ' + ('' + document.getElementById('integerlist').placeholder).substring(0,1).toLowerCase() + (document.getElementById('integerlist').placeholder + ' ').substring(1);
}
document.getElementById('integerlist').value = location.search.split('integerlist=')[1] ? decodeURIComponent(location.search.split('integerlist=')[1].split('&')[0]) : '';
document.getElementById('integerlist').title = location.search.split('integerlist=')[1] ? ('Thanks for entering the valid "' + decodeURIComponent(location.search.split('integerlist=')[1].split('&')[0]) + '"').replace('Thanks for entering the valid ""', document.getElementById('integerlist').placeholder) : document.getElementById('integerlist').placeholder;

document.getElementById('integerlist').oninvalid = function(event) {
retval=event.target.value;
if (event.target.title.indexOf(', ') != -1) {
event.target.title=document.event.target.placeholder;
}
event.target.setCustomValidity('Regarding your invalid entry of "' + retval + '", ' + ('' + event.target.title).substring(0,1).toLowerCase() + (event.target.title + ' ').substring(1));
event.target.title=('Regarding your invalid entry of "' + retval + '", ' + ('' + event.target.title).substring(0,1).toLowerCase() + (event.target.title + ' ').substring(1));
event.target.value='';
setTimeout(postonl, 5000);
};
}

function osb(fois) {
if (retval != '') {
fois.action='#' + decodeURIComponent(retval);
if (document.getElementById('integerlist').title.indexOf(', ') != -1) {
document.getElementById('integerlist').title=document.getElementById('integerlist').placeholder;
}
retval='';
return false;
} else {
document.getElementById('integerlist').setCustomValidity('');
validilist=document.getElementById('integerlist').value;
}
return true;
}
</script>
<script type='text/javascript' src='pattern_test.js?theelementid=csvlist' defer></script>
</head>
<body onload=onl();>
<h1 id=myh1 title=''>Test oninvalid and setCustomValidity and Input pattern attribute</h1>
<h3>RJM Programming <a target=_blank style='cursor:pointer;text-decoration:none;' href='./pattern_test.htm' title='Restart'>-</a> February, 2021</h3>
<h4>Thanks to <a target=_blank title='https://stackoverflow.com/questions/21784152/how-to-combine-inputafterfocus-pure-css' href='https://stackoverflow.com/questions/21784152/how-to-combine-inputafterfocus-pure-css'>https://stackoverflow.com/questions/21784152/how-to-combine-inputafterfocus-pure-css</a> and <a target=_blabnk title='https://stackoverflow.com/questions/3286991/can-a-before-selector-be-used-with-a-textarea' href='https://stackoverflow.com/questions/3286991/can-a-before-selector-be-used-with-a-textarea'>https://stackoverflow.com/questions/3286991/can-a-before-selector-be-used-with-a-textarea</a></h4>
<form id=myform method=GET onsubmit="return osb(this);" action=./pattern_test.htm>
<input type="text" onblur="document.getElementById('fsub').click();" name="integerlist" id="integerlist" pattern="[0-9,]*" value="" placeholder="Please enter a comma separated positive integer list" title="Please enter a comma separated positive integer list"></input>
<input type=submit id=fsub value=Submit style=display:none;></input></form>
<br><br>
<p> ... or via external Javascript call below ...</p>
<form id=ejmyform method=GET data-onsubmit="return ejosb(this);" action=./pattern_test.htm>
<input type="text" style="width:80%;" data-onblur="document.getElementById('ejfsub').click();" data-name="csvlist" id="csvlist" data-pattern="[0-9,]*" value="" data-placeholder="Please enter a comma separated positive integer list (where red dashed border flags invalid entry)" data-title="Please enter a comma separated positive integer list (where red dashed border flags invalid entry)"></input>
<input type=submit id=ejfsub value=Validate></input></form>

<input type="text" style="position:absolute;top:-300px;left:-300px;" value=""></input>
</body>
</html>