{"id":720,"date":"2014-06-26T07:09:02","date_gmt":"2014-06-26T14:09:02","guid":{"rendered":"http:\/\/blog.ls-al.com\/?p=720"},"modified":"2014-06-26T07:09:02","modified_gmt":"2014-06-26T14:09:02","slug":"form-input-validation","status":"publish","type":"post","link":"https:\/\/blog.ls-al.com\/form-input-validation\/","title":{"rendered":"Form Input Validation"},"content":{"rendered":"

Since I have to go research this every time I need it, I am jotting down a little how to. Frequently using html forms + PHP, I need to validate an input field. <\/p>\n

Below is a recent simple javascript check for a regex style date + time input field. I also made this regex similar to msql timestamp for easier use in the database. <\/p>\n

Of course there are a lot of ways to get this accomplished but my goal is fairly lightweight here. jquery and jquery date pickers are good options.<\/p>\n

Like I said this is simple and use simple javascript alerts. You can make this a *lot* nicer with some ajax and css.<\/p>\n

edit.php:
\n#########
\nPay attention to the form name \"frmEdit\", onSubmit action and the name of the field ie \"dt_started\". Those are the ones that will get used in the javascript code.<\/p>\n

\r\n<?php\r\n?>\r\n<html>\r\n<head>\r\n<link rel="stylesheet" type="text\/css" media="screen" href="css\/main.css" \/>\r\n<script type="text\/javascript" src="js\/jquery-1.2.6.min.js"><\/script>\r\n<script type="text\/javascript" src="js\/dateValidation.js"><\/script>\r\n<title>Edit<\/title>\r\n[...]\r\n<form name="frmEdit" onReset="return confirm('Clear form?')" onSubmit="return ValidateForm()" action="<?php echo $_SERVER['PHP_SELF'] . "?edit=eTask&id=$id"; ?>" method="post">\r\n<table border="0" width="100%">\r\n[...]\r\n<tr><td>dt_started: <\/td><td><input type="text" name="dt_started" maxlength=19 size=20 value="<?php echo htmlentities($details['dt_started']); ?>" \/>example: 2014-06-25 16:00:00 <\/td><\/tr>\r\n<tr><td>dt_finshed: <\/td><td><input type="text" name="dt_finshed" maxlength=19 size=20 value="<?php echo htmlentities($details['dt_finshed']); ?>" \/>example: 2014-06-25 16:45:00 <\/td><\/tr>\r\n[...]\r\n<input type="reset" value="Reset" \/> <input type="button" onClick="window.location='index.php'" value="Back" \/><\/a><\/tr><\/td>\r\n<\/table>\r\n<\/form>\r\n<\/pre>\n
dateValidation.js:
\n##################<\/p>\n
\r\n\/\/ Declaring valid date character, minimum year and maximum year\r\nvar dtCh= "-";\r\nvar minYear=1900;\r\nvar maxYear=2100;\r\n[...]\r\nfunction isDateTime(dtStr){\r\n  var matches = dtStr.match(\/^(\\d{4})\\-(\\d{2})\\-(\\d{2}) (\\d{2}):(\\d{2}):(\\d{2})$\/);\r\n  if (matches === null) {\r\n    alert("Please enter a valid date")\r\n    return false\r\n  } else{\r\n    var year = parseInt(matches[1], 10);\r\n    var month = parseInt(matches[2], 10) - 1; \/\/ months are 0-11\r\n    var day = parseInt(matches[3], 10);\r\n    var hour = parseInt(matches[4], 10);\r\n    var minute = parseInt(matches[5], 10);\r\n    var second = parseInt(matches[6], 10);\r\n    var date = new Date(year, month, day, hour, minute, second);\r\n    if (date.getFullYear() !== year\r\n      || date.getMonth() != month\r\n      || date.getDate() !== day\r\n      || date.getHours() !== hour\r\n      || date.getMinutes() !== minute\r\n      || date.getSeconds() !== second\r\n    ) {\r\n       alert("Please enter a valid date")\r\n       return false\r\n    } else {\r\n       return true\r\n    }\r\n  }\r\n}\r\n\r\nfunction ValidateForm(){\r\n  var dt=document.frmEdit.dt_started\r\n  if (isDateTime(dt.value)==false){\r\n    dt.focus()\r\n    return false\r\n  }\r\n  var dt=document.frmEdit.dt_finshed\r\n  if (isDateTime(dt.value)==false){\r\n    dt.focus()\r\n    return false\r\n  }\r\nreturn true\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Since I have to go research this every time I need it, I am jotting down a little how to.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[48],"class_list":["post-720","post","type-post","status-publish","format-standard","hentry","category-php","tag-javascript"],"_links":{"self":[{"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/posts\/720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":0,"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/posts\/720\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/media?parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/categories?post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ls-al.com\/wp-json\/wp\/v2\/tags?post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}