Date validation in form with javascript

Question

I am trying to validate my form. I have a date input where I am checking to make sure the day is between 1 and 31, the month is between 0 and 12 and the year is between 1910 and 2019.

This is my code so far:

var date = document.getElementById('dob');
var day = date.substring(0, 2);
var month = date.substring(3, 5);
var year = date.substring(6, 10);

if (year > 2019 || year < 1910) 
{
  valid = false;
  document.getElementById('dateValid').style.display = "inline-block";
} 
else 
{
  document.getElementById('dateValid').style.display = "inline-block";
}

this is my html code for the date field:

<div>
   <label for="dob">Date of Birth</label>
    <input type="date" name="dob" id="dob">
    <span class="error" id="dateValid">valid date required</span>

    </div>

I have repeated the above for the day and month. I am unsure why this wouldn't work. Any help would be appreciated.

Answer 1

Full source code would definitely help to answer the question. But from the limited information i sew here. getElementById will give you the element. You still need the value. Check what value are you getting in the date variable by console.log Since I am not sure about the element 'dob', I can't comment on that. date.value should give you the value of the field. The below should work:

var date = document.getElementById('dob').value;
var day = date.substring(0, 2);
var month = date.substring(3, 5);

Answer 2

document.getElementById('dob') will return html element so you can't use substring first. You need to get element value by .value . I provided illustration with input date ...

 function check() { var date = document.getElementById('dob').value; var day = date.substring(9, 2); var month = date.substring(5, 2); var year = date.substring(0, 4); console.log(year) var valid; if (year > 2019 || year < 1910) { valid = false; //document.getElementById('dateValid').style.display = "inline-block"; } else { valid = true; } console.log(valid) }

 <input type="date" id="dob" onchange="check()">

Answer 3

Built-in form validation uses HTML5 form validation features. This validation generally doesn't require JavaScript. Built-in form validation has better performance than JavaScript. But, while highly customizable, native validation is not as customizable as JavaScript. Documentation

 input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }

 <form> <div> <label for="dob">Date of Birth</label> <input type="date" name="dob" id="dob" min="1910-01-01" max="2019-12-31"> <span class="error" id="dateValid">valid date required</span> </div> <input type="submit"> </form>

Please note that the max and min attributes of the input tag is not supported in Internet Explorer 9 and earlier versions.