{"id":51613,"date":"2021-02-06T03:01:29","date_gmt":"2021-02-05T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51613"},"modified":"2021-02-04T19:35:31","modified_gmt":"2021-02-04T09:35:31","slug":"html-oninvalid-event-form-validation-pattern-setcustomvalidity-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-pattern-setcustomvalidity-tutorial\/","title":{"rendered":"HTML Oninvalid Event Form Validation Pattern setCustomValidity Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pattern_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Oninvalid Event Form Validation Pattern setCustomValidity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pattern_test.jpg\" title=\"HTML Oninvalid Event Form Validation Pattern setCustomValidity Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Oninvalid Event Form Validation Pattern setCustomValidity Tutorial<\/p><\/div>\n<p>The recent <a title='HTML Oninvalid Event Form Validation Primer Tutorial' href='#htmloefvpt'>HTML Oninvalid Event Form Validation Primer Tutorial<\/a> taught us that &#8230;<\/p>\n<ul>\n<li>in the client (ie. HTML and Javascript and CSS) side of the web application wooooorrrrrlllllddd it is best to involve a form &#8230; as much as anything to get to involve &#8230;<\/li>\n<li><a target=_blank title='Oninvalid event information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_oninvalid.asp'>oninvalid<\/a> event for a textbox or other user interaction HTML element &#8230; and today we do not involve with this &#8230;\n<ol>\n<li><strike>required<\/strike> attribute &#8230; opening the door, that way, to involving a textbox&#8217;s combination of &#8230;<\/li>\n<li><a target=_blank title='HTML input element pattern attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_pattern.asp'><i>pattern<\/i><\/a> attribute &#8230;<br \/>\n<code><br \/>\n&lt;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\"&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank title='setCustomValidity information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLSelectElement\/setCustomValidity'>setCustomValidity<\/a> graphics &#8230; to inform of errors within an &#8230;<\/li>\n<li>oninvalid event <font color=blue>Javascript function<\/font> (set up at document.body.onload event Javascript function below) &#8230;<br \/>\n<code><br \/>\n  function onl() {<br \/>\n      if (('' + location.hash) != '') {<br \/>\n        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);<br \/>\n      }<br \/>\n      document.getElementById('integerlist').value = location.search.split('integerlist=')[1] ? decodeURIComponent(location.search.split('integerlist=')[1].split('&')[0]) : '';<br \/>\n      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;<br \/>\n<br \/> <br \/>\n      <font color=blue>document.getElementById('integerlist').oninvalid = function(event) {<br \/>\n      retval=event.target.value;<br \/>\n      if (event.target.title.indexOf(', ') != -1) {<br \/>\n         event.target.title=document.event.target.placeholder;<br \/>\n      }<br \/>\n      event.target.setCustomValidity('Regarding your invalid entry of \"' + retval + '\", ' + ('' + event.target.title).substring(0,1).toLowerCase() + (event.target.title + ' ').substring(1));<br \/>\n      event.target.title=('Regarding your invalid entry of \"' + retval + '\", ' + ('' + event.target.title).substring(0,1).toLowerCase() + (event.target.title + ' ').substring(1));<br \/>\n      event.target.value='';<br \/>\n      setTimeout(postonl, 5000);<br \/>\n    };<\/font><br \/>\n  }<br \/>\n<br \/>\n  function postonl() {<br \/>\n      document.getElementById('integerlist').setCustomValidity('');<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; (for that textbox) &#8230;<\/li>\n<li>fired at the form onsubmit event (at which you should return false when there is an unacceptable error in the programmer&#8217;s eyes)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; the purpose of today&#8217;s &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pattern_test.html_GETME\" title=\"pattern_test.html\">pattern_test.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pattern_test.html\" title=\"Click picture\">live run<\/a> web application being to validate a textbox asking for &#8220;a comma separated list of positive integers&#8221; web application (that involves validation), and you can try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pattern_test.html\" style=\"width:100%;height:300px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-pattern-setcustomvalidity-tutorial\/'>HTML Oninvalid Event Form Validation Pattern setCustomValidity Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmloefvpt'>Previous relevant <a target=_blank title='HTML Oninvalid Event Form Validation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-primer-tutorial\/'>HTML Oninvalid Event Form Validation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Oninvalid Event Form Validation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.jpg\" title=\"HTML Oninvalid Event Form Validation Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Oninvalid Event Form Validation Primer Tutorial<\/p><\/div>\n<p>It&#8217;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 <font size=1>(because for yours truly it can seem soul destroying the way data can be in real life, asking for information off the user)<\/font>.  You can leave it to the end of the client validation possibilities by using logic off the HTML form onsubmit event.  Generally you&#8217;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 <a title='HTML Worded Validation via Client Input or Regular Expression Tutorial' href='#htmlwvciret'>HTML Worded Validation via Client Input or Regular Expression Tutorial<\/a> below if you like), we&#8217;re exploring an earlier <font size=1>(only just)<\/font> intervention than that of onsubmit, using the <i>oninvalid<\/i> event, as explained by <a target=_blank title='Oninvalid event information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_oninvalid.asp'>W3schools<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/event_oninvalid.asp'><p>\nThe oninvalid event occurs when a submittable &lt;input&gt; element is invalid.<\/p>\n<p>For example, the input field is invalid if the required attribute is set and the field is empty (the required attribute specifies that the input field must be filled out before submitting the form).\n<\/p><\/blockquote>\n<p>We find it suits very well those new HTML5 input element types that are trying to hone in on specific data types.  To show what we are getting at here we wrote a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html_GETME\">oninvalid.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html\" title=\"Click picture\">live run<\/a> link, for you to try some of this for yourself.<\/p>\n<hr>\n<p id='htmlwvciret'>Previous relevant <a target=_blank title='HTML Worded Validation via Client Input or Regular Expression Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-worded-validation-via-client-input-or-regular-expression-tutorial\/'>HTML Worded Validation via Client Input or Regular Expression Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Worded Validation via Client Input or Regular Expression Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailvalidation.jpg\" title=\"HTML Worded Validation via Client Input or Regular Expression Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Worded Validation via Client Input or Regular Expression Tutorial<\/p><\/div>\n<p>It&#8217;s not, at least for us, a trivial issue to add wording in addition to yesterday&#8217;s <a title='HTML Validation via Client Input or Regular Expression Tutorial' href='#htmlvciret'>HTML Validation via Client Input or Regular Expression Tutorial<\/a> red dashed bordering flagging invalid entries regarding &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>telephone number<\/li>\n<li>url<\/li>\n<li>number<\/li>\n<\/ul>\n<p> &#8230; for those two modes of validation being &#8230;<\/p>\n<ul>\n<li>tailored HTML input type= attribute element types that came in with HTML5 &#8230; versus &#8230;<\/li>\n<li>HTML input type=text combined via Javascript client regex match<font size=1>ing<\/font><\/li>\n<\/ul>\n<p>We wanted to add wording to ram the message home a bit better, a thought you may want to investigate yourself for mission critical information.<\/p>\n<p>Would it surprise you to learn that the event driven programming code methods for the two modes above are very different?  The former mode needs CSS styling <i>:invalid<\/i> selector changes that later can be detected back at Javascript (though you may want to research <a target=_blank title='jQuery CSS' href='https:\/\/api.jquery.com\/category\/selectors\/'>jQuery<\/a> CSS functionalities) and though we experimented with the <i>:after<\/i> selector and the <i>content:<\/i> attribute unsuccessfully <b>we succeeded with<\/b> &#8230;<\/p>\n<p><code><br \/>\n#iemail:invalid {<br \/>\n  border: 2px dashed red;<br \/>\n  <b>max-width: <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a>(100% - 5px);<\/b><br \/>\n}<br \/>\n<br \/>\n#iemail:invalid:after {<br \/>\n  content: ' is an invalid email address';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; combined with Javascript &#8230;<\/p>\n<p><code><br \/>\nvar emailr=null;<br \/>\n<br \/>\n\/\/ at document.body onload below ...<br \/>\nif (emailr == null) { emailr=document.getElementById('iemail').getBoundingClientRect(); }<br \/>\n<br \/>\nfunction chkemail() {<br \/>\n  if (iai == '') { iai=' is an invalid '; }<br \/>\n  if (document.getElementById('iemail').value.indexOf(iai) == 0) {<br \/>\n    document.getElementById('iemail').value=document.getElementById('iemail').value.replace(iai, document.getElementById('iemail').placeholder + iai);<br \/>\n  } else if (('' + document.getElementById('iemail').style.border).indexOf(' dashed ') != -1) {<br \/>\n    document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';<br \/>\n  } else <b>if (emailr != null) {<br \/>\n    var vsemailr=document.getElementById('iemail').getBoundingClientRect();<br \/>\n    if (vsemailr.width != emailr.width) {<br \/>\n      document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';<br \/>\n      document.getElementById('iemail').style.maxWidth=emailr.width; \/\/'100%';<br \/>\n    }<br \/>\n  }<\/b> else if (emailp != '') {<br \/>\n    document.getElementById('iemail').placeholder=emailp;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; as well as keyboard event logics collecting into <i>this.placeholder<\/i> the characters the user enters.<\/p>\n<p>Would it surprise you to learn that the event driven programming code methods for the HTML5 input type=number within that first mode needs different validation tactics to the others within that first mode above?  The reason for this is that HTML5 uses keypress limiting ideas with this input type=number type of element and we have to work &#8220;around the sides&#8221; of that (as in &#8220;as well as keyboard event logics collecting into this.placeholder the characters the user enters&#8221;).<\/p>\n<p>Central to Javascript logic here is settling on a phrase to look for, ours being &#8221; is an invalid &#8221; that you can see in play with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.html-GETME\" title=\"email_validation.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.html-GETME\" title=\"email_validation.htm\">email_validation.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='htmlvciret'>Previous relevant <a target=_blank title='HTML Validation via Client Input or Regular Expression Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-validation-via-client-input-or-regular-expression-tutorial\/'>HTML Validation via Client Input or Regular Expression Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Validation via Client Input or Regular Expression Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.jpg\" title=\"HTML Validation via Client Input or Regular Expression Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Validation via Client Input or Regular Expression Tutorial<\/p><\/div>\n<p>Our attitude to validation is &#8220;to get in there early&#8221;, so no matter how effective the recent <a title='PHP Form Validation via Filter Regular Expression Tutorial' href='#phpfvfret'>PHP Form Validation via Filter Regular Expression Tutorial<\/a> is with its data validation, this serverside validation can&#8217;t beat client validation you do right at the &#8230;<\/p>\n<ul>\n<li>onkeydown and onkeypress<\/li>\n<li>onblur<\/li>\n<\/ul>\n<p> &#8230; (optional) event logics associated with HTML input elements.  With HTML5 came several input tag type= attribute validators &#8230;<\/p>\n<table>\n<tr>\n<th>HTML5 input tag type= attribute<\/th>\n<th>Client Validation Methods (can combine with pattern= attribute)<\/th>\n<\/tr>\n<tr>\n<td>email<\/td>\n<td>CSS selector styling eg. &lt;style&gt; #iemail:invalid {  border: 2px dashed red; } #iemail:valid {  border: 2px solid black; } &lt;\/style&gt; <\/td>\n<\/tr>\n<tr>\n<td>tel<\/td>\n<td>pattern=&#8217;^[0-9-+s()]*$&#8217; and CSS selector styling eg. &lt;style&gt; #iipn:invalid {  border: 2px dashed red; } #iipn:valid {  border: 2px solid black; } &lt;\/style&gt; <\/td>\n<\/tr>\n<tr>\n<td>url<\/td>\n<td>CSS selector styling eg. &lt;style&gt; #iurl:invalid {  border: 2px dashed red; } #iurl:valid {  border: 2px solid black; } &lt;\/style&gt; <\/td>\n<\/tr>\n<tr>\n<td>number<\/td>\n<td>Self validates<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; versus HTML input type=text combined with regex expression match<font size=1>ing<\/font> &#8230; as for tel<font size=1>ephone<\/font> number &#8230;<br \/>\n<code><br \/>\nfunction huhipn(inw) {<br \/>\n  var isok=false;<br \/>\n  if (inw.value != '') {<br \/>\n    \/\/ Thanks to <a target=_blank title='https:\/\/www.w3resource.com\/javascript\/form\/phone-no-validation.php' href='https:\/\/www.w3resource.com\/javascript\/form\/phone-no-validation.php'>https:\/\/www.w3resource.com\/javascript\/form\/phone-no-validation.php<\/a><br \/>\n    isok=inw.value.match(\/^\\(?([0-9]{3})\\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$\/) || inw.value.match(\/^\\d{10}$\/) || inw.value.match(\/^\\d{11}$\/);<br \/>\n  if (!isok) {<br \/>\n    inw.style.border='2px dashed red';<br \/>\n  } else {<br \/>\n    inw.style.border='2px solid black';<br \/>\n  }<br \/>\n  } else {<br \/>\n    inw.style.border='2px solid black';<br \/>\n  }<br \/>\n  return isok;<br \/>\n}<br \/>\n<\/code>\n<\/p>\n<p> &#8230; called off those aforesaid mentioned events.<\/p>\n<p>You can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.html_GETME\" title=\"email_validation.html\">email_validation.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/email_validation.html\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/p>\n<hr>\n<p id='phpfvfret'>Previous relevant <a target=_blank title='PHP Form Validation via Filter Regular Expression Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-form-validation-via-filter-regular-expression-tutorial\/'>PHP Form Validation via Filter Regular Expression Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/filter_ideas.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Form Validation via Filter Regular Expression Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_filter_regexp.jpg\" title=\"PHP Form Validation via Filter Regular Expression Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Form Validation via Filter Regular Expression Tutorial<\/p><\/div>\n<p>With the recent <a title='PHP Form Validation via Filter Extension Tutorial' href='#phpfvfet'>PHP Form Validation via Filter Extension Tutorial<\/a> we avoided <font size=1>&#8220;the elephant in the room&#8221;<\/font> that being the use of <a target=_blank title='Regular expression information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Regular_expression'>regular expressions<\/a>.  No, Nala, not &#128512; or even &#129322; but the definition of a date data item (or can be a PHP object) via &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Perl Regular Expressions' href='http:\/\/jkorpela.fi\/perl\/regexp.html'>Perl Regular Expressions<\/a> &#8230; combined with &#8230;<\/li>\n<li><a target=_blank title='PHP Filter Extension information from w3schools' href='https:\/\/www.w3schools.com\/php\/php_filter.asp'>PHP Filter extension<\/a>&#8216;s FILTER_VALIDATE_REGEXP &#8230; and &#8230;<\/li>\n<li>PHP <a target=_blank title='PHP date_create_from_format function information' href='http:\/\/php.net\/manual\/en\/datetime.createfromformat.php'>date_create_from_format(string $format , string $time)<\/a><\/li>\n<\/ul>\n<p>So what is it about <i>dates<\/i> that suit <i>regular expressions<\/i>?  It&#8217;s that there are so many ways to express a Date (or DateTime) in <i>user entry land<\/i> (as a &#8220;timestamp format&#8221; entry) and a <i>regular expression<\/i> set aside for some of those <i>timestamp formats<\/i> that we can think that a user may think of, could be the go to start down this road of discovery.  Behind the scenes we also arrange for an <i>equivalent PHP &#8220;timestamp format&#8221; equivalent<\/i> to be sent by the HTML form controlling all this so that we can have a two phase date validation process that &#8230;<\/p>\n<ul>\n<li>first passes the user entry through a <a target=_blank title='PHP Filter Extension information from w3schools' href='https:\/\/www.w3schools.com\/php\/php_filter.asp'>PHP Filter extension<\/a>&#8216;s FILTER_VALIDATE_REGEXP examination, but there being no &#8220;integer range&#8221; constraint mechanism here, you could enter a value such as &#8220;2019-02-29&#8221; and it is fairly obvious what you mean with this Year-Month-Date entry, but it passes this first pass of validation (there being no &#8220;integer range&#8221; constraint mechanism) when it shouldn&#8217;t (curiously PHP <a target=_blank title='PHP date_create_from_format function information' href='http:\/\/php.net\/manual\/en\/datetime.createfromformat.php'>date_create_from_format(string $format , &#8220;2019-02-29&#8221;)<\/a> will return a date object that is dated &#8220;2019-03-01&#8221; <font size=1>such is its desire to please<\/font> but we do a sanity check for this &#8220;empathy overshoot&#8221; in our code), and so we need a &#8230;.<\/li>\n<li>second pass creates a PHP date object using that <i>equivalent PHP &#8220;timestamp format&#8221; equivalent<\/i> <font size=1>(that we separately and additionally scrutinize for that &#8220;empathy overshoot&#8221; issue as explained above)<\/font><\/li>\n<\/ul>\n<p> &#8230; and if successful with both passes above the user entered date information passes our validation processing <font size=1>to go on and win that elusive cigar?!<\/font><\/p>\n<hr>\n<p id='phpfvfet'>Previous relevant <a target=_blank title='PHP Form Validation via Filter Extension Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-form-validation-via-filter-extension-tutorial\/'>PHP Form Validation via Filter Extension Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/filter_ideas.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Form Validation via Filter Extension Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_filter.jpg\" title=\"PHP Form Validation via Filter Extension Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Form Validation via Filter Extension Tutorial<\/p><\/div>\n<p>Our recent <a target=_blank title='Javascript and PHP Base64 Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-tutorial\/'>Javascript and PHP Base64 Primer Tutorial<\/a> with its <a target=_blank title='Base64 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Base64'>Base64<\/a> thoughts, the &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-tutorial\/'><p>\n<code><br \/>\n  echo \"&lt;textarea id=tb64 cols=100 rows=10>\" . <b>base64_decode(urldecode($_POST['base64']))<\/b> . \"&lt;\/textarea&gt;&lt;br&gt;\";<br \/>\n<\/code>\n<\/p><\/blockquote>\n<p> &#8230; of which we adopt for today&#8217;s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts.  The most immediate validation thought on an HTML form is probably &#8230;<\/p>\n<ul>\n<li>onsubmit event Javascript client logic &#8230; but today we go exploring &#8230;<\/li>\n<li>callback PHP serverside logic via the <a target=_blank title='PHP Filter Extension information from w3schools' href='https:\/\/www.w3schools.com\/php\/php_filter.asp'>PHP Filter extension functionalities<\/a> in the pattern &#8230;<br \/>\n$var=filter_var($prevar, <select size=9 style='inline-block;'><option value=FILTER_SANITIZE_STRING>FILTER_SANITIZE_STRING<\/option><option value=FILTER_VALIDATE_FLOAT>FILTER_VALIDATE_FLOAT<\/option><option value=FILTER_VALIDATE_INT>FILTER_VALIDATE_INT<\/option><option value=FILTER_VALIDATE_IP>FILTER_VALIDATE_IP<\/option><option value=FILTER_VALIDATE_EMAIL>FILTER_VALIDATE_EMAIL<\/option><option value=FILTER_SANITIZE_URL>FILTER_SANITIZE_URL<\/option><option value=FILTER_VALIDATE_URL>FILTER_VALIDATE_URL<\/option><option value=FILTER_VALIDATE_BOOLEAN>FILTER_VALIDATE_BOOLEAN<\/option><option value=FILTER_SANITIZE_MAGIC_QUOTES>FILTER_SANITIZE_MAGIC_QUOTES<\/option><\/select>);\n<\/li>\n<\/ul>\n<p>You will see on examination of our proof of concept PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/filter_ideas.php_GETME\" title=\"filter_ideas.php\">filter_ideas.php<\/a> code how these PHP Filter Extensions can be used for validation purposes (with a more <a target=_blank title='Filter IDs' href='https:\/\/www.w3schools.com\/php\/showphp.asp?filename=demo_filter1'>extensive list here<\/a>), and you could try it out for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/filter_ideas.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>If form validation interests you, perhaps a read of <a title='HTML5 Form API Validation Primer Tutorial' href='#html5fapivpt'>HTML5 Form API Validation Primer Tutorial<\/a> below is in order.<\/p>\n<hr>\n<p id='html5fapivpt'>Previous relevant <a target=_blank title='HTML5 Form API Validation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-form-api-validation-primer-tutorial\/'>HTML5 Form API Validation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Form API Validation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.jpg\" title=\"HTML5 Form API Validation Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Form API Validation Primer Tutorial<\/p><\/div>\n<p>HTML5 is more than just the &#8220;5&#8221; tagged on.  Take a look at <a target=_blank title='List of HTML5 APIs' href='https:\/\/www.htmlgoodies.com\/html5\/javascript\/a-5-minute-overview-of-all-new-javascript-apis-in-html5.html'>this list<\/a> of API related parts to the HTML5 specification.<\/p>\n<p>As you may have gleaned from our recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-history-tutorial\/' title='HTML Input Element Types Randomized History Tutorial'>HTML Input Element Types Randomized History Tutorial<\/a> a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively.   Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging &#8220;practical element&#8221; of web design to do well to not involve user error, or &#8220;user giving up&#8221;.<\/p>\n<p>The HTML5 form API has great &#8220;Constraint Validation&#8221;, not all new to HTML, but vastly improved and extended, as you can read a lot about at this <a target=_blank href='https:\/\/www.html5rocks.com\/en\/tutorials\/forms\/constraintvalidation\/' title='Constraint Validation in HTML5 Form API'>really great webpage<\/a>, thanks.<\/p>\n<p>The HTML input attribute we find of great practical benefit with all this is the <a target=_blank title='HTML input element pattern attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_pattern.asp'><i>pattern<\/i><\/a> attribute to define a constraint, in the same sort of vein as a <a target=_blank title='Javascript regex' href='http:\/\/www.w3schools.com\/jsref\/jsref_obj_regexp.asp'>RegEx<\/a> expressions helps you perform pattern-matching and &#8220;search and replace&#8221; functions on text.  This would be great use for organizations that work with &#8220;codes&#8221; or &#8220;Part Numbers&#8221; or SKU (<a target=_blank title='SKU information' href='http:\/\/www.investopedia.com\/terms\/s\/stock-keeping-unit-sku.asp'>stock keeping units<\/a>) that follow a consistent <i>pattern<\/i>.<\/p>\n<p>You can try some simple Constraint Validation at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html\" title=\"Click picture\">live run<\/a> link with its underlying serverside PHP code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html_GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html\">html5_form_constraint_validation.html<\/a> as you wish.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33831' onclick='var dv=document.getElementById(\"d33831\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33831' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d43716' onclick='var dv=document.getElementById(\"d43716\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43716' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d43754' onclick='var dv=document.getElementById(\"d43754\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/regex\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43754' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45003' onclick='var dv=document.getElementById(\"d45003\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45003' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45013' onclick='var dv=document.getElementById(\"d45013\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45013' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45672' onclick='var dv=document.getElementById(\"d45672\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45672' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51613' onclick='var dv=document.getElementById(\"d51613\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/PATTERN\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51613' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent HTML Oninvalid Event Form Validation Primer Tutorial taught us that &#8230; in the client (ie. HTML and Javascript and CSS) side of the web application wooooorrrrrlllllddd it is best to involve a form &#8230; as much as anything &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-pattern-setcustomvalidity-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[281,452,576,652,3012,870,2687,997,3558,3557,1675,1319],"class_list":["post-51613","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-form","tag-html","tag-javascript","tag-oninvalid","tag-onload","tag-pattern","tag-programming","tag-required","tag-setcustomvalidity","tag-textbox","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51613"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51613"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51613\/revisions"}],"predecessor-version":[{"id":51624,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51613\/revisions\/51624"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}