Input Type Date validation 18 years old below

Question

I'm having trouble with validation of input type="date". It shouldn't accept 18 years old below. Could you please help me? Thank you.

I google and search the forum I haven't found the answer. I tried to validate it in the next page using PHP but my professor told me I must validate it in the same page. Like onchange it must be validated.

<input type="date" name="bday" id="bday" value="">

Answer 1

In case you are allowed to use HTML5, it is pretty simple. You can simply use the max attribute:

<input id="bday" type="date" max="1995-12-31" required="" />

In case you have to do it dynamic you can create the max attribute dynamically.

I made an example: http://jsfiddle.net/trixta/wpb54/ http://jsfiddle.net/trixta/wpb54/4/

Answer 2

make use of javascript. If you want to accept birthdate of only 18 years and above then try following javascript code. put onblur="return dobcheck()" in bday tag.

<script type="text/javascript">
function dobcheck()
{
    var birth = document.getElementById('bday')
    if(birth != "")
    {

        var record=document.getElementById('bday').value.trim();
        var currentdate=new Date();    
        var day1 = currentdate3.getDate();   
        var month1 = currentdate3.getMonth();
        month1++;     
        var year11 = currentdate3.getFullYear()-17;
        var year2= currentdate3.getFullYear()-100;   
        var record_day1=record.split("/");
        var sum=record_day1[1]+'/'+record_day1[0]+'/'+record_day1[2];  
        var current= month1+'/'+day1+'/'+year11;
        var current1= month1+'/'+day1+'/'+year2;
        var d1=new Date(current)
        var d2=new Date(current1)
        var record1 = new Date(sum);      
        if(record1 > d1)
        {

            alert("Sorry ! Minors need parential guidance to use this website");
            document.getElementById('bday').blur();
            document.getElementById('bday').value="";
            document.getElementById('bday').focus();
            return false;
        }
    } 
}
</script>

i hope that now you will get it...