Form Input Validation

June 26, 2014 admin

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.

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.

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.

Like I said this is simple and use simple javascript alerts. You can make this a *lot* nicer with some ajax and css.

edit.php:
#########
Pay 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.

<?php
?>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/dateValidation.js"></script>
<title>Edit</title>
[...]
<form name="frmEdit" onReset="return confirm('Clear form?')" onSubmit="return ValidateForm()" action="<?php echo $_SERVER['PHP_SELF'] . "?edit=eTask&id=$id"; ?>" method="post">
<table border="0" width="100%">
[...]
<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>
<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>
[...]
<input type="reset" value="Reset" /> <input type="button" onClick="window.location='index.php'" value="Back" /></a></tr></td>
</table>
</form>

dateValidation.js:
##################

// Declaring valid date character, minimum year and maximum year
var dtCh= "-";
var minYear=1900;
var maxYear=2100;
[...]
function isDateTime(dtStr){
  var matches = dtStr.match(/^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
  if (matches === null) {
    alert("Please enter a valid date")
    return false
  } else{
    var year = parseInt(matches[1], 10);
    var month = parseInt(matches[2], 10) - 1; // months are 0-11
    var day = parseInt(matches[3], 10);
    var hour = parseInt(matches[4], 10);
    var minute = parseInt(matches[5], 10);
    var second = parseInt(matches[6], 10);
    var date = new Date(year, month, day, hour, minute, second);
    if (date.getFullYear() !== year
      || date.getMonth() != month
      || date.getDate() !== day
      || date.getHours() !== hour
      || date.getMinutes() !== minute
      || date.getSeconds() !== second
    ) {
       alert("Please enter a valid date")
       return false
    } else {
       return true
    }
  }
}

function ValidateForm(){
  var dt=document.frmEdit.dt_started
  if (isDateTime(dt.value)==false){
    dt.focus()
    return false
  }
  var dt=document.frmEdit.dt_finshed
  if (isDateTime(dt.value)==false){
    dt.focus()
    return false
  }
return true
}