locked
Input type date validation RRS feed

  • Question

  • User1099429166 posted

    Dear All,

    I have 2 input controls of type date. Below is my code

     <input type="date" class="form-control" runat="server" id="startAdd" required="required">
     <input type="date" class="form-control" runat="server" id="endAdd" required="required">

    I have written a compare validation code in which a start date should be less than end date

      var start = document.getElementById('ctl00_ContentPlaceHolder1_startAdd');
                var end = document.getElementById('ctl00_ContentPlaceHolder1_endAdd');
    
                 if (start != null) {
                     start.addEventListener('change', function () {
                         if (start.value)
                             end.min = start.value;
                     }, false);
                 }
                   
                 if (end != null) {
                     end.addEventListener('change', function () {
                         if (end.value)
                             start.max = end.value;
                     }, false);
    
                 }

    This works fine only when I select the calendar control, Like for example when I select 03-01-2019 in start date , it will disable all the dates less than  03-01-2019 in end date. This works but the problem is this doesn't work when I start typing. so If I have start date as 03-01-2019 , I can type 03-012015 in end date. Is there any way to stop this. Any help would be greatly appreciated.

    Wednesday, March 6, 2019 8:23 PM

All replies

  • User1099429166 posted

    Any one?

    Wednesday, March 6, 2019 11:48 PM
  • User839733648 posted

    Hi Sam Solomon,

    According to your description and code, I've found that if you enable to type date to input, you could type anything you want in it.

    And you may have to write complicated validation to ensure the input is right.

    So I suggest that you could avoid this issue by disabling keyboard input.

    You could just add onkeydown="return false" to do this.

     <input type="date" class="form-control" runat="server" id="startAdd" required="required" onkeydown="return false"/>>
     <input type="date" class="form-control" runat="server" id="endAdd" required="required" onkeydown="return false"/>>

    Best Regards,

    Jenifer

    Thursday, March 7, 2019 6:07 AM
  • User-474980206 posted

    which browser are you testing with? they all have different features for validation. chrome & safari IOS should behave as expected. 

    Thursday, March 7, 2019 4:46 PM
  • User-2054057000 posted

    Hello Sam, 

    This question answer is already answered in this post - Bootstrap Modal and Date Validation

    Hope it helps you.

    Thanks

    Friday, March 8, 2019 7:14 AM