日期和时间验证（PHP和MySQL）

Question

I have a HTML form taking date and time as inputs:

<div>
  <label for="date_of_appointment">Date of appointment *</label>
  <input type="date" name="date_of_appointment" id="date_of_appointment"
         value="<?php echo $date_of_appointment; ?>"
  required oninvalid="setCustomValidity('Fill in the date')"
  oninput="setCustomValidity('')">
</div>

<div>
  <label for="time_of_appointment">Time of appointment *</label>
  <input type="time" name="time_of_appointment" id="time_of_appointment"
         value="<?php echo $time_of_appointment; ?>"
         required oninvalid="setCustomValidity('Fill in the time')"
         oninput="setCustomValidity('')">
</div>

I'm using the HTML5 input types date and time. It's important to catch all the errors in all the browsers. How would you design the validation for this to be sure the user will provide the date and time in the correct format for inserting into the DB?

In my solution I would validate it as follows:

1. Not all browsers offer the time/date pickers. What is the expected format in those fields?

2. Let's say the expected date format is YYYY-MM-DD. I would split it with PHP explode() function and validate with PHP checkdate($month, $day, $year) function. And similarly created a routine for expected time format. Can I do more between step 1 and 2 with javascript, without the need to reload a page to tell the user that the format is wrong immediately he types something breaking the format?

3. insert the values with correct format into DB.

Answer 1

The three steps you proposed looks fine for me. Indeed, you can do more things between what you've defined as steps 1 and 2. Since, the 2º step is where you implement the server-side validation, all things that you can do between steps 1 and 2 are considered client-side validation. Although, using a datetime picker would be a better solution, because in some way it makes the task easier. But, never mind!

As it appears in HTML5 docs contraint validation section:

"HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side."

You should always implement a server-side validation of forms, it is necessary for security and data integrity. Now if you want to add a client-side validation of forms in order to support a better user experience by giving the user immediate feedback about the input data, you can follow the following:

1-In case of browsers supporting HTML5, and for input types date and time, using intrinsic and basic constraints are sufficient. The mere fact of choosing the most semantically appropriate value for the type attribute of the element, e.g., choosing the date or time type automatically creates a constraint that checks whether the value is a valid date or time:

<input type="date">
<input type="time">

2-In case of browsers not supporting HTML5 fully, you can add the validation-related attribute pattern. For this, you have to construct a solid javascript regex. There are so many valid regex. The date regex proposed below makes a difference between dates and months, and validate only 2 centuries:

<input type="date" title="Enter the date in dd/mm/yyyy format" placeholder="Insert a valid date" pattern="([0-2]\d|3[0-1])\/(0\d|1[0-2])\/(19|20)\d{2}">
<input type="time" title="Insert a valid time in hh:mm:ss 24h format" placeholder="Insert a valid time" pattern="([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d">

3-Now, for browsers not supporting HTML5, you have to add a javascript validation. This one can be executed e.g onblur() using a javascript regex:

<input type="date" title="Enter the date in dd/mm/yyyy format" placeholder="Insert a valid date" pattern="([0-2]\d|3[0-1])\/(0\d|1[0-2])\/(19|20)\d{2}" onblur="checkPattern(this)">
<input type="time" title="Insert a valid time in hh:mm:ss 24h format" placeholder="Insert a valid time" pattern="([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d" onblur="checkPattern(this)">

function checkPattern(obj){
    var re = new RegExp("^"+obj.pattern+"$");
        if (!re.test(obj.value)) {
            obj.focus();
            alert("Wrong format. Please, "+obj.title);
        }
}

Hope it's useful!