{"id":30511,"date":"2017-06-08T03:01:19","date_gmt":"2017-06-07T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30511"},"modified":"2017-06-08T17:37:34","modified_gmt":"2017-06-08T07:37:34","slug":"regular-expression-object-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/regular-expression-object-primer-tutorial\/","title":{"rendered":"Regular Expression Object Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regexp_object_validation.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Regular Expression Object Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regexp_object_validation.jpg\" title=\"Regular Expression Object Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Regular Expression Object Primer Tutorial<\/p><\/div>\n<p>When you are gathering information from an HTML form and want to make sure the information is likely to be valid before moving on you will often want to call on &#8230;<\/p>\n<ul>\n<li>HTML form method=&#8217;GET&#8217; (so that we can stick with client based web application)<\/li>\n<li>HTML form onsubmit=&#8217;return regexp_object_validation();&#8217; (where a false return from Javascript regexp_object_validation() will stop further navigation &#8230; presumably because regexp_object_validation() determined that the data of the form failed validation tests)<\/li>\n<li><a target=_blank title='RegExp Objects information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_regexp.asp'>RegExp Object<\/a> validation techniques work well to validate those more difficult data items (which are often the modt important data items, have you noticed?) to validate such as email addresses and URLs (such as today&#8217;s Image URL one) and data from HTML textarea elements over more than one line of data (such as today&#8217;s two line Email To Name (textarea) field)<\/li>\n<\/ul>\n<p>Today&#8217;s entry level web application we&#8217;ve called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regexp_object_validation.html_GETME\" title=\"regexp_object_validation.html\">regexp_object_validation.html<\/a> (and can be tried at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regexp_object_validation.html\" title=\"regexp_object_validation.html\" title=\"Click picture\">live run<\/a> link) can show you validation for three (HTML form) data items, respectively &#8230;<\/p>\n<ol>\n<li>Image URL<\/li>\n<li>Email Address<\/li>\n<li>Email To Name (via textarea two line entry method)<\/li>\n<\/ol>\n<p>You might get ideas for how you might structure validation of a Street Address or Posting Address from the ideas presented by that last one.  Street Address or Posting Address are less globally universal that URLs and email addresses (and so we thank those standards people getting together on this) so the way you localize validation can be helped out by what is expected of the user at each line of entry on an HTML textarea element entry.  So, with the great help we got from <i>JavaScript and Ajax<\/i> (seventh edition) by Tom Negrino and Dori Smith (ISBN: 978-0-321-56408-5) ( Chapter 8 ) &#8230; thanks &#8230; we teed those three data items with corresponding Regular Expressions as below &#8230;<\/p>\n<ol>\n<li><code>\/^(file|https|http):\\\/\\\/\\S+\\\/\\S+\\.(gif|jpg|jpeg|png|bmp|tiff)$\/i<\/code> &#8230; Image URL<\/li>\n<li><code>\/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$\/<\/code> &#8230; Email Address<\/li>\n<li><code>\/\\s*\\n\\s*\/<\/code> &#8230; Email To Name (via textarea two line entry method)<\/li>\n<\/ol>\n<p>Below we&#8217;ll show you our onsubmit function for today&#8217;s work &#8230;<\/p>\n<p><code><br \/>\nvar image_re = \/^(file|https|http):\\\/\\\/\\S+\\\/\\S+\\.(gif|jpg|jpeg|png|bmp|tiff)$\/i;<br \/>\nvar email_re = \/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$\/;<br \/>\nvar name_re = \/\\s*\\n\\s*\/;<br \/>\n<b><\/b><br \/>\nfunction regexp_object_validation() {<br \/>\n  var okayf=true;<br \/>\n<b><\/b><br \/>\n  if (okayf) {<br \/>\n    okayf = image_re.test(document.getElementById('image_url').value);<br \/>\n    if (!okayf) document.getElementById('image_url').style.border = '3px solid red';<br \/>\n  }<br \/>\n<b><\/b><br \/>\n  if (okayf) {<br \/>\n    okayf = email_re.test(document.getElementById('email_address').value);<br \/>\n    if (!okayf) document.getElementById('email_address').style.border = '3px solid red';<br \/>\n  }<br \/>\n<b><\/b><br \/>\n  if (okayf) {<br \/>\n    okayf = name_re.test(document.getElementById('your_name').value);<br \/>\n    if (!okayf) document.getElementById('your_name').style.border = '3px solid red';<br \/>\n  }<br \/>\n<b><\/b><br \/>\n  return okayf;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Hope you can get some validation ideas out of today&#8217;s work.<\/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='#d30511' onclick='var dv=document.getElementById(\"d30511\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30511' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you are gathering information from an HTML form and want to make sure the information is likely to be valid before moving on you will often want to call on &#8230; HTML form method=&#8217;GET&#8217; (so that we can stick &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/regular-expression-object-primer-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":[400,452,1533,576,609,652,1712,997,1262,1319,1358],"class_list":["post-30511","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-event","tag-form","tag-get","tag-html","tag-input","tag-javascript","tag-onsubmit","tag-programming","tag-textarea","tag-tutorial","tag-validation"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30511"}],"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=30511"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30511\/revisions"}],"predecessor-version":[{"id":30672,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30511\/revisions\/30672"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=30511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=30511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=30511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}