HTML5 Age Validation

Question

I am required to create a form using HTML5 that has this validation;

Date of birth should be a valid date in the format dd/mm/yyyy. After entering the DOB, the page should calculate the age and alert the user if he/she is under 18 with the message “You must be over 18 to register”

Could anyone please make my understand how I code create this validation? The could below is how my form looks like.

<div id="content">
    <article id="contentimg">
        <form action="http://posttestserver.com/post.php" onsubmit="return validate_form(this)" method="post">
        <fieldset style="border: 1px solid; padding: 10px;">
            <legend>Enter your information to subscirbe:</legend>
            First name: <input class="glowing-border" type="text" name="firstname" required><br>
            Last name: <input class="glowing-border" type="text" name="lastname" required><br>
            Birthday: <input class="glowing-border" type="date" name="bday"><br>
            Address: <input class="glowing-border2" type="text" name="address"><br>
            Mobile Number: <input class="glowing-border" type="text" name="mobno"><br>
            Email: <input id="email" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}"><br>
            Confirm Email: <input id="confemail" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}" 
            onfocus="validateMail(document.getElementById('email'), this);" oninput="validateMail(document.getElementById('email'), this);"><br>
            <input class="glowing-border" type="submit" value="Submit">
            <input class="glowing-border" type="reset" value="Reset">
        </fieldset>
        </form>
    </article>
</div>

Please click "edit" under your question and post the Javascript that is handling your onSubmit or that otherwise reads your form and compares the Birthday and current date. If you don't have any javascript yet, the general rule is to write the Javascript that you know and ask when you get stuck. — Paul, May 27 '14 at 09:01

mplungjan · Answer 1 · 2014-05-27T09:55:43.087

1

In Chrome, if it is set to type="text" we can do this onblur or onsubmit

function validateDOB(bday) {
  var dateString = bday.value;
  var parts = dateString.split("/"); // not testing if the format is correct here
  var now = new Date();
  var birthday = new Date(now.getFullYear(),parts[1]-1,parts[0]);
  var age = now.getFullYear()-parts[2];
  if (now<birthday) age--;
  if (age<18) {
    alert("You must be over 18 to register");
    return false
  }
  // other validation
  return true;
}

I am looking into how to do the same on an HTML5 date field

This does not work for some reason

FIDDLE

function getDob() {
  var date = new Date();
  return (date.getMonth()+1)+"-"+date.getDate()+"-"+(date.getFullYear()-18);
}
$(function() {
  $("input[type=date]").prop("max",getDob());
});

UPDATE - min/max has little support.

Instead use jQuery date validation

$(function() {
  $("input[type=date]").prop("max",getDob());
  $("#bday").validate();
});

using

<input id="bday" required="required"  min="1900-01-01" max="2099-09-13" type="date" >

edited May 27 '14 at 09:55

answered May 27 '14 at 09:06

mplungjan

169,008
28
173
236

How would I now implement this onto my javascript file? Also, would I need to change any variable names? – user3679003 May 27 '14 at 09:16
Just add it in the head of the page in script tags or put it in an external js file and add the script as `` in the head – mplungjan May 27 '14 at 09:27
Do I need to give the form an id? – user3679003 May 27 '14 at 09:28
Wait - I am testing this – mplungjan May 27 '14 at 09:30
This is how my form looks like: http://prntscr.com/3n0hm0 I just want a validation rule with HTML5 that allows me to validate the date the user has inputted and give a message stating that he/she must be over 18 to register. – user3679003 May 27 '14 at 09:33
See update. There is no built-in validation for all browsers – mplungjan May 27 '14 at 11:23

score 1 · Accepted Answer · answered May 27 '14 at 09:18

1

One more idea is

 <input type="number" size="4" name="age" min="18" required style="display:none;">

add this field and calculate on change Birthday field

answered May 27 '14 at 09:18

rjdmello

865
2
9
14

HTML5 Age Validation

2 Answers2