JavaScript Age Validation from DOB for Drop Down Selection - Stack Overflow

admin管理员组

文章数量:1277546

I have seen many Age Validation from DOB codes but none can I seem to get to work with my code.

Basically, I am required for my TAFE course to create a form with First Name, Surname, Email address, Contact phone number, Date of Birth and Area of Interest (which is a drop down box with Childrens and Adults Books).

I am required to validate the Date of Birth as being in the correct format. I have successfully done this and it equates for 30 day months and Leap Years as well.

The next part requires the Area of Interest Drop Down box to validate on submit that the Age of the Person is over 18. BUT. Only if the Area Of Interest chosen is Adults Books.

Now, I could do something simple and make it so all ages on and above 1996 will be rejected, but I would rather create a validation that does this from the DOB that was input, as I think this is what is to be expected.

The DOB is input in the form of DD/MM/YYYY.

This is what I have so far:

<script language="JavaScript" type="text/javascript">
function validateForm()
{
    *snipped firstname, surname, email validation*
    var dob = document.getElementById("dateofbirth").value;
    *snipped dob validation*
    var area = document.getElementById("areaofinterest").value;
    if (area == "")
    {
        alert("Please select an Area of Interest!");
        return false;
    }
    var now = new Date();
    var birthdate = dob.split("/");
    var born = new Date(dob[2], dob[0], dob[1] * 1 - 1);
    var age = Math.floor((now.getTime() - born.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
    if (area == "adults" && age<18)
    {
        alert("You need to be 18 years of age and older for the Adults books!");
        return false;
    }
return true;
}
</script>

I am only a beginner in JavaScript so there is probably something very obviously wrong with this piece of code. But basically what is written is what I want to achieve.

See if the Date of Birth is over 18 if the Adults Books Area of Interest is chosen.

The HTML can be seen below of what I have:

<form method="post" name="form1" onsubmit="return validateForm()" action="">
    Fields marked with * are required to be filled out!
    <br />
    First Name*: 
    <input type="text" id="firstname" name="First Name" placeholder="e.g. John" />
    <br />
    Surname*:
    <input type="text" id="surname" name="Surname" placeholder="e.g. Smith" />
    <br />
    Email address*:
    <input type="text" id="emailaddress" name="Email Address" placeholder="e.g. [email protected]" />
    <br />
    Contact phone number:
    <input type="text" id="phonenumber" name="Contact Phone Number" placeholder="e.g. 0410 224 567" />
    <br />
    Date of Birth*:
    <input type="text" id="dateofbirth" name="Date of Birth" placeholder="DD/MM/YYYY" />
    <br />
    Area of Interest*:
    <select id="areaofinterest" name="Area Of Interest" />
    <option value="">Select interest</option>
    <option value="children">Books for children</option>
    <option value="adults">Books for adults</option>
    </select>
    <br />
    <input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>

I appreciate any feedback. And I am sorry if this has been answered already. I know it has but I cant seem to get it to work for my purpose. I may made a simple format mistake or forgotten something out. It is probably something very obvious.

I have seen many Age Validation from DOB codes but none can I seem to get to work with my code.

Basically, I am required for my TAFE course to create a form with First Name, Surname, Email address, Contact phone number, Date of Birth and Area of Interest (which is a drop down box with Childrens and Adults Books).

I am required to validate the Date of Birth as being in the correct format. I have successfully done this and it equates for 30 day months and Leap Years as well.

The next part requires the Area of Interest Drop Down box to validate on submit that the Age of the Person is over 18. BUT. Only if the Area Of Interest chosen is Adults Books.

Now, I could do something simple and make it so all ages on and above 1996 will be rejected, but I would rather create a validation that does this from the DOB that was input, as I think this is what is to be expected.

The DOB is input in the form of DD/MM/YYYY.

This is what I have so far:

<script language="JavaScript" type="text/javascript">
function validateForm()
{
    *snipped firstname, surname, email validation*
    var dob = document.getElementById("dateofbirth").value;
    *snipped dob validation*
    var area = document.getElementById("areaofinterest").value;
    if (area == "")
    {
        alert("Please select an Area of Interest!");
        return false;
    }
    var now = new Date();
    var birthdate = dob.split("/");
    var born = new Date(dob[2], dob[0], dob[1] * 1 - 1);
    var age = Math.floor((now.getTime() - born.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
    if (area == "adults" && age<18)
    {
        alert("You need to be 18 years of age and older for the Adults books!");
        return false;
    }
return true;
}
</script>

I am only a beginner in JavaScript so there is probably something very obviously wrong with this piece of code. But basically what is written is what I want to achieve.

See if the Date of Birth is over 18 if the Adults Books Area of Interest is chosen.

The HTML can be seen below of what I have:

<form method="post" name="form1" onsubmit="return validateForm()" action="">
    Fields marked with * are required to be filled out!
    <br />
    First Name*: 
    <input type="text" id="firstname" name="First Name" placeholder="e.g. John" />
    <br />
    Surname*:
    <input type="text" id="surname" name="Surname" placeholder="e.g. Smith" />
    <br />
    Email address*:
    <input type="text" id="emailaddress" name="Email Address" placeholder="e.g. [email protected]" />
    <br />
    Contact phone number:
    <input type="text" id="phonenumber" name="Contact Phone Number" placeholder="e.g. 0410 224 567" />
    <br />
    Date of Birth*:
    <input type="text" id="dateofbirth" name="Date of Birth" placeholder="DD/MM/YYYY" />
    <br />
    Area of Interest*:
    <select id="areaofinterest" name="Area Of Interest" />
    <option value="">Select interest</option>
    <option value="children">Books for children</option>
    <option value="adults">Books for adults</option>
    </select>
    <br />
    <input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>

I appreciate any feedback. And I am sorry if this has been answered already. I know it has but I cant seem to get it to work for my purpose. I may made a simple format mistake or forgotten something out. It is probably something very obvious.

• javascript
• validation
• drop-down-menu

Share Improve this question Follow edited Jan 5, 2014 at 21:04 PeeHaa 72.7k6060 gold badges194194 silver badges264264 bronze badges asked May 31, 2013 at 6:23 Curley5959Curley5959 11922 gold badges33 silver badges1212 bronze badges 2

• Basically the code does not work. It just passes through. I think one of the dates is in the wrong format as when age is called it returns as NaN – Curley5959 Commented May 31, 2013 at 6:31
• Thanks for the correction. Sorry about the mistake :) – Curley5959 Commented May 31, 2013 at 11:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Demo : http://jsfiddle/mkginfo/LXEHp/7/

Use this JavaScript. tested and working well. Note: Please check all your code with this code. You will find few bugs in your past code. I am suggesting 'console.log' and firebug to check values.

  function validateForm()
    {
        //*snipped firstname, surname, email validation*
        var dob = document.getElementById("dateofbirth").value;
       // *snipped dob validation*
        var area = document.getElementById("areaofinterest").value;
        if (area == "")
        {
            alert("Please select an Area of Interest!");
            return false;
        }

        var now = new Date();
        var birthdate = dob.split("/");
        var born = new Date(birthdate[2], birthdate[0]-1, birthdate[1]);
        age=get_age(born,now);
        if (area == "adults" && age<18)
        {
            alert("You need to be 18 years of age and older for the Adults books!");
            return false;
        }

    }

    function get_age(born, now) {
      var birthday = new Date(now.getFullYear(), born.getMonth(), born.getDate());
      if (now >= birthday) 
        return now.getFullYear() - born.getFullYear();
      else
        return now.getFullYear() - born.getFullYear() - 1;
    }

Rather than subtracting the average number of milliseconds per year, try to figure out if the person has had his/her birthday this year (this depends on the timezone). Then subtract year of birth from current year and subtract 1 if the person has not had a birthday this year to get the age. Something like:

function age(born, now) {
  var birthday = new Date(now.getFullYear(), born.getMonth(), born.getDate());
  if (now >= birthday) 
    return now.getFullYear() - born.getFullYear();
  else
    return now.getFullYear() - born.getFullYear() - 1;
}

I just find a small bug in your age which returns as NaN.

Try to replace the born variable as follows:

    var born = new Date(dob.toString());

Note: Issue was with Date parsing! Hope this help! If not, let me know.

U can calculate exact age validation by this code. 
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
        function AgeValidation(ageOfCustomer)
        {
            var date=saildates.split('/')[2];
            var d = new Date();
            var lipday=((d.getFullYear()-date)/4);
            var month = d.getMonth()+1;
            var day = d.getDate();
            var output = day + '/' + month + '/' + d.getFullYear();
            var age=((daydiff(parseDate(output), parseDate(saildates))-lipday)/365);
            if(age > 18.000 || age== 18.000)
            {
                return true;
            }
            else
            {
                alert('Your age should be 18 or greater than 18 yrs!!!');
            }
        }
        function parseDate(str)
        {
            var mdy = str.split('/')
            return new Date(mdy[2], mdy[1]-1, mdy[0]);
        }
        function daydiff(first, second) 
        {
            return (first-second)/(1000*60*60*24)
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server"     OnClientClick="AgeValidation(this.form.TextBox1.value);"
            Text="Button" onclick="Button1_Click" />
    </div>
    </form>
</body>

本文标签： JavaScript Age Validation from DOB for Drop Down SelectionStack Overflow