Run a function onblur when only when none of 3 inputs have focus

Question

I need to accept the start date of an event in an HTML form Created 3 Separate select boxes for date, month, and time as follows

I want to run an onblur function on any of the boxes and should return false if any other 2 boxes have focus

<script type="text/javascript">
  function chkStartDate(str) {
    var dd = document.getElementById("startDD");
    var mm = document.getElementById("startMM");
    var yy = document.getElementById("startYY");
    var err = document.getElementById("dateerr");
    var focus = document.activeElement;

    if (focus == dd || focus == mm || focus == yy) {
      err.style.display = "block";
      err.innerHTML = "Still in Focus";
      return true;
    } else {
      if (dd.value == "" || mm.value == "" || yy.value == "") {
        err.style.display = "block";
        err.innerHTML = "Invalid Start Date";
      } else {
        var d = new date();
        d.setDate(dd.value);
        d.setMonth(mm.value);
        d.setFullYear(yy.value);

        err.style.display = "block";
        err.innerHTML = !isNaN(d.valueOf());
        return true;
      }
    }
  }
</script>
<html>

<body>
  <form name=event method=post action=xxx.asp>
    <font face=Verdana Style="FONT-SIZE: 12px"><b><i>Start Date</i></b></font> &nbsp;
    <Select id=startDD name=startDD style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "dddd")>
      <Option value="">DD</option>
      <Option value="1">1</option>
      <Option value="2">2</option>
      <Option value="3">3</option>
      <Option value="4">4</option>
      <Option value="5">5</option>
      <Option value="6">6</option>
      <Option value="7">7</option>
      <Option value="8">8</option>
      <Option value="9">9</option>
      <Option value="10">10</option>
      <Option value="11">11</option>
      <Option value="12">12</option>
      <Option value="13">13</option>
      <Option value="14">14</option>
      <Option value="15">15</option>
      <Option value="16">16</option>
      <Option value="17">17</option>
      <Option value="18">18</option>
      <Option value="19">19</option>
      <Option value="20">20</option>
      <Option value="21">21</option>
      <Option value="22">22</option>
      <Option value="23">23</option>
      <Option value="24">23</option>
      <Option value="25">25</option>
      <Option value="26">26</option>
      <Option value="27">27</option>
      <Option value="28">28</option>
      <Option value="29">29</option>
      <Option value="30">30</option>
      <Option value="31">31</option>
    </Select>&nbsp;
    <Select id=startMM name=startMM style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "mmmm")>
      <Option value="">MM</option>
      <Option value="0">Jan</option>
      <Option value="1">Feb</option>
      <Option value="2">Mar</option>
      <Option value="3">Apr</option>
      <Option value="4">May</option>
      <Option value="5">June</option>
      <Option value="6">Jul</option>
      <Option value="7">Aug</option>
      <Option value="8">Sep</option>
      <Option value="9">Oct</option>
      <Option value="10">Nov</option>
      <Option value="11">Dec</option>
    </Select>&nbsp;
    <Select id=startYY name=startYY style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "yyyy")>
      <Option value="">YYYY</option>
      <Option value="2019">2019</option>
      <Option value="2020">2020</option>
      <Option value="2021">2021</option>
      <Option value="2022">2022</option>
      <Option value="2023">2023</option>
      <Option value="2024">2024</option>
      <Option value="2025">2025</option>
    </Select>&nbsp;
    <font face=verdana style="font-size:10px"><i>(Start Date in DD/MM/YYYY Format)</i></font>
    <font style="font-size:4px"><br><br></font>

    <font face=Verdana Style="FONT-SIZE: 11px" color=red><b>
   <span id="dateerr" style="display:none"></span></b></font>

  </form>
</body>

</html>

I want the onblur event to validate the date only if focus is not on any of the 3 select boxes (not happening)

The last item you click always will have focus unless you click/tap somewhere outside it. And what if the user starts with the year, then the day and then the month? It will generate twice the error, while the user still is busy filling the form. Skip the blur and just put a button in. Then check after the user indicates he's ready. — Michel, May 27 '19 at 08:29
And checking the max amount of days in a month is done with: `var d=new Date(year, month+1, 0, 0, 0, 0, 0); var max_days=d.getDate();` — Michel, May 27 '19 at 08:35
michel you are 100%, the same thing i want to achieve is that validate function should be called only when focus - Was on any of the 3 select boxes - and now on none of the 3 select boxes — Vikram Sachdeva, May 27 '19 at 09:46
Please don't ask multiple questions in one post. The duplicate answers the date validation part. The other part should be asked with a title like "How to run a function onblur when none of 3 inputs have focus" or similar. — RobG, May 27 '19 at 10:25

score 1 · Answer 1 · answered May 27 '19 at 08:35

For your second point to validate the date :

Create a date object by passing the iso string representation of your date

Create an iso string representation of your date

Ensure this two string are identical

new Date("2019-04-31T00:00:00.000Z").toJSON() // "2019-05-01T00:00:00.000Z"

function validateDate(dd, mm, yyyy)
{
 dd = (dd < 10) ? "0"+dd : dd;
    mm = (mm < 10) ? "0"+mm : mm;
    yyyy = (yyyy < 100) ? "20"+yyyy : yyyy;

    var d_iso = new Date(yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z").toJSON();
    var iso = yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z";

    if(d_iso === iso)
       return true;
    else
       return false;
}


console.log(validateDate(4, 2, 19)); // true
console.log(validateDate(31, 2, 19)); // false
console.log(validateDate(31, 4, 2019)); // false
console.log(validateDate(31, 3, 2019)); // true

that feel when people forget that `new Date(Date.UTC(year, month -1, day))` is also possible.. — GottZ, May 27 '19 at 08:40

Run a function onblur when only when none of 3 inputs have focus

1 Answers1