{"id":50861,"date":"2020-11-13T03:01:04","date_gmt":"2020-11-12T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50861"},"modified":"2020-11-12T17:45:06","modified_gmt":"2020-11-12T07:45:06","slug":"favourites-poll-email-moderation-client-validation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-client-validation-tutorial\/","title":{"rendered":"Favourites Poll Email Moderation Client Validation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Favourites Poll Email Moderation Client Validation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_validation.jpg\" title=\"Favourites Poll Email Moderation Client Validation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Favourites Poll Email Moderation Client Validation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s Favourites Poll web application of <a title='Favourites Poll Email Moderation Primer Tutorial' href='#fpempt'>Favourites Poll Email Moderation Primer Tutorial<\/a> involves client-side HTML textboxes asking for interactive entry using an HTML form methodology.  Not with all such projects with HTML form textboxes do we apply any client-side Javascript validation logic but today we are for the following reasons &#8230;<\/p>\n<ul>\n<li>not all the textboxes represent mandatory fields (ie. ones we&#8217;d like an answer for) &#8230; and the client-side Javascript validation can show &#8230;<\/li>\n<li>the user can see that this poll is not being nosey, just curious, because it becomes apparent the only mandatory textbox is that &#8220;Title&#8221; one &#8230; as well as &#8230;<\/li>\n<li>the &#8220;Link&#8221; and &#8220;Email&#8221; textbox data requirement information presented to the user can enhance their understanding of how they can define their &#8220;Favourite&#8221; data <font color=blue>via new dropdown elements<\/font> &#8230; and so &#8230;<\/li>\n<li>considerably improve the user experience &#8230; we think<\/li>\n<\/ul>\n<p>With those aims in mind we looked for a &#8220;fresh look&#8221; at client-side form textbox validation and arrived at <a target=_blank title='Excellent link' href='https:\/\/stackoverflow.com\/questions\/10887645\/easiest-way-to-mask-characters-in-html5-text-input\/48445613'>this wonderful link<\/a>&#8216;s excellent ideas &#8230;<\/p>\n<blockquote cite='https:\/\/stackoverflow.com\/questions\/10887645\/easiest-way-to-mask-characters-in-html5-text-input\/48445613'>\n<ol>\n<li>Basic validation can be performed by choosing the type attribute of input elements. For example: &lt;input type=&#8221;email&#8221; \/&gt;<br \/>\n &lt;input type=&#8221;URL&#8221; \/&gt;<br \/>\n &lt;input type=&#8221;number&#8221; \/&gt;\n<\/li>\n<li>using pattern attribute like: &lt;input type=&#8221;text&#8221; pattern=&#8221;[1-4]{5}&#8221; \/&gt;\n<\/li>\n<li>required attribute &lt;input type=&#8221;text&#8221; required \/&gt;\n<\/li>\n<li>maxlength: &lt;input type=&#8221;text&#8221; maxlength=&#8221;20&#8243; \/&gt;\n<\/li>\n<li>min &#038; max: &lt;input type=&#8221;number&#8221; min=&#8221;1&#8243; max=&#8221;4&#8243; \/&gt;\n<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; and we use Javascript DOM methodologies to achieve a lot of these validations &#8220;dynamically depending&#8221; <font color=blue>on those new dropdown element selections and &#8220;onchange&#8221; Javascript function logics below<\/font>  &#8230;<\/p>\n<p><code><br \/>\n function dosfe(selo) {   \/\/ \"Email\" textbox dropdown \"onchange\" event logic<br \/>\n    if (selo.value != '') {<br \/>\n      document.getElementById('femail').innerHTML=selo.value;<br \/>\n      document.getElementById('oemail').innerHTML=' (required)';<br \/>\n      if (selo.value == 'Email') {<br \/>\n       document.getElementById('favouriteemail').type='email';<br \/>\n       document.getElementById('favouriteemail').required=true;<br \/>\n      } else if (selo.value == 'SMS') {<br \/>\n       document.getElementById('favouriteemail').type='tel';<br \/>\n       document.getElementById('favouriteemail').required=true;<br \/>\n      }<br \/>\n    }<br \/>\n    selo.value='';<br \/>\n }<br \/>\n<br \/> <br \/>\n function tlinkc(selo) { \/\/ \"Link\" textbox dropdown \"onchange\" event logic<br \/>\n    if (selo.value == '') {<br \/>\n      document.getElementById('favouritevalue').type='text';<br \/>\n      document.getElementById('favouritevalue').required=false;<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('slink').innerHTML='';<br \/>\n      document.getElementById('favouritevalue').pattern='';<br \/>\n      document.getElementById('favouritevalue').placeholder='';<br \/>\n      document.getElementById('favouritevalue').minlength=0;<br \/>\n      document.getElementById('favouritevalue').maxlength=1000;<br \/>\n    } else if (selo.value.trim() == '') { \/\/ URL<br \/>\n      document.getElementById('favouritevalue').type='url';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='';<br \/>\n      document.getElementById('favouritevalue').placeholder='';<br \/>\n      document.getElementById('favouritevalue').minlength=0;<br \/>\n      document.getElementById('favouritevalue').maxlength=1000;<br \/>\n    } else if (selo.value == '0') { \/\/ SMS<br \/>\n      document.getElementById('favouritevalue').type='tel';<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + ' ';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='';<br \/>\n      document.getElementById('favouritevalue').placeholder='';<br \/>\n      document.getElementById('favouritevalue').minlength=0;<br \/>\n      document.getElementById('favouritevalue').maxlength=1000;<br \/>\n    } else if (selo.value == '@') { \/\/ Email<br \/>\n      document.getElementById('favouritevalue').type='email';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='';<br \/>\n      document.getElementById('favouritevalue').placeholder='';<br \/>\n      document.getElementById('favouritevalue').minlength=0;<br \/>\n      document.getElementById('favouritevalue').maxlength=1000;<br \/>\n    } else if (selo.value == '11') { \/\/ YouTube ID<br \/>\n      \/\/ Q_qA89dmGco<br \/>\n      document.getElementById('favouritevalue').type='text';<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='[a-zA-Z0-9-_]{11}$';<br \/>\n      if (document.getElementById('favouritevalue').value == '') {<br \/>\n        document.getElementById('favouritevalue').placeholder='Q_qA89dmGco';<br \/>\n      }<br \/>\n      document.getElementById('favouritevalue').minlength=11;<br \/>\n      document.getElementById('favouritevalue').maxlength=11;<br \/>\n    } else if (selo.value == '10') { \/\/ ISBN 10 digits<br \/>\n      \/\/ 0-297-81242-4<br \/>\n      document.getElementById('favouritevalue').type='text';  \/\/ 'number'<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='[0-9]{10}$';<br \/>\n      if (document.getElementById('favouritevalue').value == '') {<br \/>\n        document.getElementById('favouritevalue').placeholder='0-297-81242-4';<br \/>\n      }<br \/>\n      document.getElementById('favouritevalue').minlength=10;<br \/>\n      document.getElementById('favouritevalue').maxlength=13;<br \/>\n    } else if (selo.value == '13') { \/\/ ISBN 13 digits<br \/>\n      \/\/ 9-781760-527334<br \/>\n      document.getElementById('favouritevalue').type='text';  \/\/ 'number'<br \/>\n      document.getElementById('htimestamp').value=document.getElementById('htimestamp').value.trim() + '';<br \/>\n      document.getElementById('favouritevalue').required=true;<br \/>\n      document.getElementById('slink').innerHTML=' (required)';<br \/>\n      document.getElementById('favouritevalue').pattern='[0-9]{13}$';<br \/>\n      if (document.getElementById('favouritevalue').value == '') {<br \/>\n        document.getElementById('favouritevalue').placeholder='9-780297-812425';<br \/>\n      }<br \/>\n      document.getElementById('favouritevalue').minlength=13;<br \/>\n      document.getElementById('favouritevalue').maxlength=15;<br \/>\n    }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Perhaps you&#8217;re now more tempted to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php-GETME\" title=\"favourites_midair.php\">the changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php-GETME\" title=\"favourites_midair.php\">favourites_midair.php<\/a> code for <font size=1>(the obviously optional)<\/font> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php\" title=\"Click picture\">Favourites Poll<\/a> web application.<\/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\/favourites-poll-email-moderation-client-validation-tutorial\/'>Favourites Poll Email Moderation Client Validation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpempt'>Previous relevant <a target=_blank title='Favourites Poll Email Moderation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-primer-tutorial\/'>Favourites Poll Email Moderation 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\/PHP\/favourites_midair.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Favourites Poll Email Moderation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_email_moderation.gif\" title=\"Favourites Poll Email Moderation Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Favourites Poll Email Moderation Primer Tutorial<\/p><\/div>\n<p>Any web application that asks for user input and stores it from an online user via an online webpage &#8230;<\/p>\n<ul>\n<li>will need to be coded in a serverside language &#8230; check &#8230; we&#8217;ll use PHP<\/li>\n<li>ideally should have an interim &#8220;moderation mechanism&#8221; &#8230; check &#8230; we&#8217;ll use Email (for one admin<font size=1>istration<\/font> user)<\/li>\n<li>will need a &#8220;database type of storage mechanism&#8221; to store (the) <i>too many entries<\/i> (that may happen) for localStorage or Cookies (methodologies) &#8230; check &#8230; will not use a large database product such as MySql but will use &#8230;\n<ol>\n<li>a flat file<\/li>\n<li>that is readable<\/li>\n<li>that is ascii<\/li>\n<li>that <i>doubles as webpage content<\/i> (ie. takes the form of HTML) &#8230; yet &#8230;<\/li>\n<li><font size=1>of itself, <\/font>is hidden to your non-admin<font size=1>istration<\/font> user &#8230; just by virtue of &#8230;<\/li>\n<li>residing &#8220;outside the public domain parts of the RJM Programming domain&#8221; &#8230; in &#8230;<\/li>\n<li>a chosen $HOME (for an RJM Programming user account) folder on the RJM Programming web server &#8230; but &#8230;<\/li>\n<li>an admin<font size=1>istration<\/font> user can use the PHP to pull in that &#8220;outside the public domain parts of the RJM Programming domain&#8221; file content, when asked for <font size=1>(which we&#8217;ve decided, is any time anyone from the public accesses our &#8220;Favourites Poll&#8221;)<\/font><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Yes, this is a nuance of data storage we&#8217;ve never tried before, it&#8217;s weirdness being that if that content could be expressed in a web browser address bar URL, any web browser web inspector would have a field day telling you all about it, and yet it is not accessible directly by the usual online user.  We realize there is nothing to accessing the PHP to effectively access it, but that is because of a genuine interest from an interested player, and we see this as a nuanced difference in data storage, at least for us here at RJM Programming.<\/p>\n<p>Perhaps you&#8217;d like to examine the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php_GETME\" title=\"favourites_midair.php\">favourites_midair.php<\/a> code for <font size=1>(the obviously optional)<\/font> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_midair.php\" title=\"Click picture\">Favourites Poll<\/a> and\/or see the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/favourites_email_moderation.gif\" title=\"Tutorial picture\">animated GIF<\/a> presentation of us polling ourself to get the ball rolling!<\/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='#d50857' onclick='var dv=document.getElementById(\"d50857\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/home\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50857' 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='#d50861' onclick='var dv=document.getElementById(\"d50861\"); 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='d50861' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Favourites Poll web application of Favourites Poll Email Moderation Primer Tutorial involves client-side HTML textboxes asking for interactive entry using an HTML form methodology. Not with all such projects with HTML form textboxes do we apply any client-side Javascript &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-client-validation-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":[3418,61,212,3483,299,354,355,3484,418,2137,452,2803,2780,652,1712,932,961,997,2334,1319,1891,1358,1411,1418],"class_list":["post-50861","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-admin","tag-administration","tag-client","tag-data-storage","tag-database-2","tag-dom","tag-domain","tag-favourites","tag-file","tag-flat-file","tag-form","tag-home","tag-interactive-entry","tag-javascript","tag-onsubmit","tag-php","tag-poll","tag-programming","tag-submit","tag-tutorial","tag-user","tag-validation","tag-web-server","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50861"}],"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=50861"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50861\/revisions"}],"predecessor-version":[{"id":50864,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50861\/revisions\/50864"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}