Question

I want to create a very simple javascript form validation. I have two input boxes that are populated by a datetime picker. the datetime picker populates the input box with in the format 2011-12-21 09:58. I have an input box for collection date and arrival date.

I want to validate that the ‘deliverdatetime’ entered is greater than the ‘collectdatetime’.

The output of a failed validation should just be in a popup window saying ‘deliverdate’ before ‘coolectdate’.

Can this be done with javascript and if so can someone give me a brief example?

my basic html form code is:

...
<td>
<input type="text" id="collectdatetime" name="collectdatetime">
</td>
<td>
<input type="text" id="deliverdatetime" name="deliverdatetime" >
</td>
...

Thanks in advance for the assistance and happy holidays to everyone.

Regards,
Ryan Smith

Answer 1

GIven the ISO8601 format of the date/time string, you can just compare the values as strings. It’s one of the beauties of using an ISO8601 format. You have asked for the delivery time to be after the collection time, which seems backwards to me but anyhow…

<form onsubmit="return checkDates(this)">
  <table>
    <tr>
      <td>
        <input type="text" id="collectdatetime" name="collectdatetime">
      <td>
        <input type="text" id="deliverdatetime" name="deliverdatetime">
      <td>
        <input type="submit">
  </table>
</form>

<script>
function checkDates(form) {
  if (form.collectdatetime.value >= form.deliverdatetime.value) {
    alert('Collection time must be after deliver time');
    return false;
  }
}
</script>