HTML FORM- validate one field against another field value at browser (client) level

Question

I have two DATE fields in a standard HTML form (startdate) and (enddate)

<form method="POST" action="processform.php" target="_top">
        <span>&#9654;</span><select class="selectdate" name="startdate" required>
        <option value='2019-12-31'>Tue, 31-Dec-19</option><option value='2019-12-30'>Mon, 30-Dec-19</option><option value='2019-12-27'>Fri, 27-Dec-19</option><option value='2019-12-26'>Thu, 26-Dec-19</option><option value='2019-12-24'>Tue, 24-Dec-19</option><option value='2019-12-23'>Mon, 23-Dec-19</option><option value='2019-12-20'>Fri, 20-Dec-19</option><option value='2019-12-19'>Thu, 19-Dec-19</option><option value='2019-12-18'>Wed, 18-Dec-19</option><option value='2019-12-17'>Tue, 17-Dec-19</option><option value='2019-12-16'>Mon, 16-Dec-19</option><option value='2019-12-13'>Fri, 13-Dec-19</option><option value='2019-12-12'>Thu, 12-Dec-19</option><option value='2019-12-11'>Wed, 11-Dec-19</option><option value='2019-12-10'>Tue, 10-Dec-19</option><option value='2019-12-09'>Mon, 09-Dec-19</option><option value='2019-12-06'>Fri, 06-Dec-19</option><option value='2019-12-05'>Thu, 05-Dec-19</option><option value='2019-12-04'>Wed, 04-Dec-19</option><option value='2019-12-03'>Tue, 03-Dec-19</option><option value='2019-12-02'>Mon, 02-Dec-19</option><option value='2019-11-29'>Fri, 29-Nov-19</option>        </select>
        <span>&#9654;</span><select name="enddate" required>
        <option value='2020-01-03'>Fri, 03Jan20</option><option value='2020-01-10'>Fri, 10Jan20</option><option value='2020-01-17'>Fri, 17Jan20</option><option value='2020-01-24'>Fri, 24Jan20</option><option value='2020-01-31'>Fri, 31Jan20</option><option value='2020-02-07'>Fri, 07Feb20</option><option value='2020-03-13'>Fri, 13Mar20</option><option value='2020-03-20'>Fri, 20Mar20</option><option value='2020-03-27'>Fri, 27Mar20</option><option value='2020-04-03'>Fri, 03Apr20</option><option value='2020-04-09'>Thu, 09Apr20</option><option value='2020-06-12'>Fri, 12Jun20</option><option value='2020-06-19'>Fri, 19Jun20</option><option value='2020-06-26'>Fri, 26Jun20</option><option value='2020-07-02'>Thu, 02Jul20</option><option value='2020-07-09'>Thu, 09Jul20</option><option value='2020-12-11'>Fri, 11Dec20</option><option value='2020-12-18'>Fri, 18Dec20</option><option value='2020-12-24'>Thu, 24Dec20</option><option value='2020-12-30'>Wed, 30Dec20</option><option value='2021-01-07'>Thu, 07Jan21</option>        </select>
        <input type="submit" value="Submit">
</form>

All I wish is to check if the user selected startdate must be less than the selected enddate at the BROWSER level (not at the server).

If selected startdate is greater than or equal to the selected enddate, it should show an error without actually submitting the form. The form should be submitted only if the startdate is less than the enddate.

While I was able to get it working on the server side using PHP, I am unable to make it work at the browser level (possibly javascript which I am not very conversant with).

Any inputs on how this can be achieved?

This is the code I am trying but it is showing "valid date range" for all cases:

    const first = document.getElementsByName('startdate')[0];
    first.addEventListener('change', function() {
      console.log(first.value);
    });

    const second = document.getElementsByName('enddate')[0];
    second.addEventListener('change', function() {
      console.log(second.value);
    });
   if (first.valueOf() > second.valueOf()) {
       alert("date is not in valid range");
   }else{
        alert("date is in valid range");
        return true;
   }

Thanks

GalAbra · Answer 1 · 2020-01-02T06:33:18.597

It might seem like a complicated task, but you can actually divide it into more manageable chunks:

Listen to changes in the form fields' values.
Validate the new values, then either allow them or do something else (i.e. show an error message).

For (1) I'd suggest you use JS. For example:

const first = document.getElementsByName('startdate')[0];
first.addEventListener('change', function() {
  console.log(first.value);
});

const second = document.getElementsByName('enddate')[0];
second.addEventListener('change', function() {
  console.log(second.value);
});

<form method="POST" action="processform.php" target="_top">
  <span>&#9654;</span>
  <select class="selectdate" name="startdate" required>
    <option value='2019-12-31'>Tue, 31-Dec-19</option>
    <option value='2019-12-30'>Mon, 30-Dec-19</option>
  </select>
  <span>&#9654;</span>
  <select name="enddate" required>
    <option value='2020-01-03'>Fri, 03Jan20</option>
    <option value='2020-01-10'>Fri, 10Jan20</option>
  </select>
  <input type="submit" value="Submit">
</form>

And then you can take it further and use the listeners' functions to actually compare the two dates.

As a side note, I also encourage you to use JS in order to produce those (too) similar <option> tags. Something like this:

const startDateElement = document.getElementsByName('startdate')[0];

const startDates = ['2019-12-31', '2019-12-30', '2019-12-27']; // etc.
startDates.forEach((date) => {
  const newOption = document.createElement('option');
  newOption.setAttribute('value', date);
  newOption.innerHTML = date;
  startDateElement.appendChild(newOption);
});

// And the same for end date

<form method="POST" action="processform.php" target="_top">
  <span>&#9654;</span>
  <select class="selectdate" name="startdate" required>
  </select>
</form>

Then your code will be much more generic, hence easier to read, maintain and update in the future.

Thanks @GalAbra, pls allow me some time to try and test this. (Will delete this comment soon after) — Aquaholic, Jan 02 '20 at 06:42
Hi @GalAbra, Am trying the following, but it always shows "date is in valid range" even when startdate > enddate. What am I missing here please? const first = document.getElementsByName('startdt')[0]; first.addEventListener('change', function() { console.log(first.value); }); const second = document.getElementsByName('enddt')[0]; second.addEventListener('change', function() { console.log(second.value); }); if (first.valueOf() > second.valueOf()) { alert("date is not in valid range"); }else{ alert("date is in valid range"); return true; } — Aquaholic, Jan 02 '20 at 07:37
@Aquaholic Please edit your original post, so your code is readable — GalAbra, Jan 02 '20 at 08:11
@Aquaholic You need to update your code *inside* the functions that `addEventListener` gets as its parameter. — GalAbra, Jan 02 '20 at 10:36

score 0 · Answer 2 · answered Jan 02 '20 at 06:29

0

You'll have to use JavaScript for any client-side validations. You can make the PHP call from the JavaScript side.

You can validate date in JavaScript like: (from here)

function validation(form) {
    var v2 = document.getElementById('v2'),
      date = new Date(v2.value),
      d1   = date.getTime(),
      d2   = new Date('12/12/2012').getTime(),
      d3   = new Date('1/1/2013').getTime();

   if (d1 > d2 || d1 < d3) {
       return true;
   }else{
       alert("date is not in valid range")
   }
}

answered Jan 02 '20 at 06:29

Kiran JD

521
6
15

Thanks @KiranJD, pls allow me some time to try and test this. (Will delete this comment soon after) – Aquaholic Jan 02 '20 at 06:43
The new Date should be dynamic, the hard coding might not be a good practice. It needs a manual intervention to change for each day value. – Surya R Praveen Jan 02 '20 at 10:24
You can pass it as second parameter – Kiran JD Jan 03 '20 at 07:11

score 0 · Answer 3 · answered Jan 02 '20 at 09:54

The functionality helps to track the user selection from start date and time to the end date and time on the client side. PHP will evaluate on the server side (Not preferable)

The user may not be able to select the end date previous of the start date.

Here is the link given below with example

DEMO - https://jsfiddle.net/ssuryar/vr1zd8ep/

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    </head>
<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

    <script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>
</html>

Thanks @SuryaRPraveen. However, I don't want to keep dependency on third-party JS files and datepickers. I am looking for clear code that I can implement at my end. Thanks for the details, which may be useful for other coders in future. — Aquaholic, Jan 02 '20 at 10:05

HTML FORM- validate one field against another field value at browser (client) level

3 Answers3