Date input type validation in javascript?

user_5956836 0
Viewed 33820

I can't quite figure out how to validate a date input type in javascript. I tried looking on the internet but I just couldnt find anything.

I have one field that ask the user to input its birthday. I want to validate it in javascript with the certain limits on days months and, especially years. For example if the user input more than 2016(or the current year) it would give an error. I can't quite figure out how to "extract" the date input type and control every elements of it (day, month, year).

Here part of my html

<form method="POST" action="request.jsp" onsubmit="return validate()">
Date of birth: <input type="date" id="bday" name="bday" value="">
</form>

Javascript:

var birthday = document.getElementById('bday').value;

This is all i've got.. please help?

validation forms html javascript
6 Answers

Here is a bin so you can have an idea how to start validating this type of field: https://jsbin.com/lifacaxonu/edit?html,js,console,output

$('#birthday').on('change', function() {
  var val = this.value.split('-');
  if (val[0] > new Date().getFullYear()) {
    console.log('invalid')
  } else {
    console.log('ok')
  }
});
user_30251040

After looking out for 3 hours, i wrote this and achieved dd/mm/yyyy date input using plain Javascript.

<div class="container">
        <div class="datetime-container">
            
            <input type="text" placeholder="write your date" id="datetime" onblur="validateDate()">
            <p id="error"></p><br>
            <input type="tel" maxlength="10" placeholder="dd/mm/yyyy"
    oninput="this.value = DDMMYYYY(this.value, event)" />     
        </div>

    </div>
    <script>
        function DDMMYYYY(value, event) {
          let newValue = value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
        
          const dayOrMonth = (index) => index % 2 === 1 && index < 4;
        
          // on delete key.  
          if (!event.data) {
            return value;
          }
          let currentYear = new Date().getFullYear();
          console.log(newValue.slice(2,4));
          if(newValue.length>=2 && newValue.slice(0,2)>31){
              tempValue = newValue;
              newValue = tempValue.replace(tempValue.slice(0,2),31);
              
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid day!";
          }else if(newValue.length>=4 &&newValue.slice(2,4)>12){
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid month!";
            tempValue = newValue;
            newValue = tempValue.replace(tempValue.slice(2,4),12);
          }else if(newValue.length==8 && newValue.slice(4)>currentYear){
            tempValue = newValue;
            newValue = tempValue.replace(tempValue.slice(4),currentYear);
            document.getElementById("error").style.display = "initial";
            document.getElementById("error").innerHTML = "Invalid year!";
          }
          else{
            document.getElementById("error").style.display="none";
          }
          return newValue.split('').map((v, i) => dayOrMonth(i) ? v + '/' : v).join('');;
        }
        </script>
user_132340370
Related