JavaScript validating datetime-local from form
<p>I have an html form which allows for a taxi booking, but it shouldn't allow bookings back in time! so the time must be current or in the future.</p>

<p>Here is the form, I use datetime-local.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* Here is the JavaScript validation for the datetime-local. */

var dateTime = document.getElementById("dateTime").value;

if (dateTime == "" || dateTime == null) {
    booking.dateTime.focus();
    document.getElementById("dateMessage").innerHTML = "Please select a date AND time, thankyou.";
    return valid = false;
} else {
    document.getElementById("destinationMessage").innerHTML = "";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>```
&lt;form id="booking" action=""&gt;
    &lt;div id="firstNameMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;First Name:
    &lt;input type="text" name="firstName" id="firstName"&gt;
    &lt;br&gt;
    &lt;div id="lastNameMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;Last Name:
    &lt;input type="text" name="lastName" id="lastName"&gt;
    &lt;br&gt;
    &lt;div id="numberMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;Contact Number:
    &lt;input type="text" name="number" id="number"&gt;
    &lt;br&gt;

    &lt;div id="unitMessage" class="red"&gt;&lt;/div&gt;
    Unit Number(optional):
    &lt;input type="text" name="unit" id="unit"&gt;
    &lt;br&gt;

    &lt;div id="streetNumberMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;Street Number:
    &lt;input type="text" name="streetNumber" id="streetNumber"&gt;
    &lt;br&gt;

    &lt;div id="streetNameMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;Street Name:
    &lt;input type="text" name="streetName" id="streetName"&gt;
    &lt;br&gt;

    &lt;div id="pickupMessage" class="red"&gt;&lt;/div&gt;
    &lt;span class="red"&gt;*&lt;/span&gt;Suburb:
    &lt;input type="text" name="pickupSuburb" id="pickupSuburb"&gt;
    &lt;br&gt;

    &lt;div id="destinationMessage" class="red"&gt;&lt;/div&gt;
    Destination Suburb&lt;span class="red"&gt;*&lt;/span&gt;:
    &lt;input type="text" name="destinationSuburb" id="destinationSuburb"&gt;
    &lt;br&gt;
    &lt;div id="dateMessage" class="red"&gt;&lt;/div&gt;
    Pick-Up Date and Time&lt;span class="red"&gt;*&lt;/span&gt;:
    &lt;input type="datetime-local" name="dateTime" id="dateTime"&gt;
    &lt;br&gt;

    &lt;br&gt;
    &lt;input type="button" value="Submit"
        onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)" /&gt;
    &lt;input type="reset" value="Reset"&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>How can I make it check for being the current time or in the future? (Basically disabling past entries).</p>