Tag Archives: CSS

The recent HTML Oninvalid Event Form Validation Primer Tutorial taught us that … in the client (ie. HTML and Javascript and CSS) side of the web application wooooorrrrrlllllddd it is best to involve a form … as much as anything to get to involve … oninvalid event for a textbox or other user interaction HTML element … and today we do not involve with this … required attribute … opening the door, that way, to involving a textbox’s combination of … pattern attribute … <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> setCustomValidity graphics … to inform of errors within an … oninvalid event Javascript function (set up at document.body.onload event Javascript function below) … 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 postonl() { document.getElementById(‘integerlist’).setCustomValidity(”); } … (for that textbox) … fired at the form onsubmit event (at which you should return false when there is an unacceptable error in the programmer’s eyes) … the purpose of today’s “proof of concept” pattern_test.html live run web application being to validate a textbox asking for “a comma separated list of positive integers” web application (that involves validation), and you can try below … Previous relevant HTML Oninvalid Event Form Validation Primer Tutorial is shown below. It’s good that there are such a variety of approaches with clientside HTML and Javascript and/or among serverside (eg. PHP, Perl, Python) components to your webpages that involve forms (because for yours truly it can seem soul destroying the way data can be in real life, asking for information off the user). You can leave it to the end of the client validation possibilities by using logic off the HTML form onsubmit event. Generally you’re leaving it to the very last opportunity if you leave it to the serverside languages. But, today, at the clientside (and read more about validation off HTML Worded Validation via Client Input or Regular Expression Tutorial below if you like), we’re exploring an earlier (only just) intervention than that of onsubmit, using the oninvalid event, as explained by W3schools … The oninvalid event occurs when a submittable <input> element is invalid. For example, … Continue reading →