Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Validation

Javascript Date Validation ( Dd/mm/yyyy) & Age Checking

Post a Comment
I've started to work on Javascript recently. What I am testing is checking the DoB in valid format. Next step will be checking the age. What my HTML code includes is below

Solution 1:

If you want to use forward slashes in the format, the you need to escape with back slashes in the regex:

var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;

http://jsfiddle.net/P9TER/

Solution 2:

I suggest using moment.js which provides an easy to use method for doing this.

interactive demo

function validate(date){
    var eighteenYearsAgo = moment().subtract(18, "years");
    var birthday = moment(date);

    if (!birthday.isValid()) {
        return"invalid date";    
    }
    elseif (eighteenYearsAgo.isAfter(birthday)) {
        return"okay, you're good";    
    }
    else {
        return"sorry, no";    
    }
}

To include moment in your page, you can use CDNJS:

<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>

Solution 3:

I'd utilize the built in Date object to do the validation for me. Even after you switch from - to / you still need to check whether the month is between 0 and 12, the date is between 0 and 31 and the year between 1900 and 2013 for example.

function validateDOB(){

    var dob = document.forms["ProcessInfo"]["txtDOB"].value;
    vardata = dob.split("/");
    // using ISO 8601 Date Stringif (isNaN(Date.parse(data[2] + "-" + data[1] + "-" + data[0]))) {
        returnfalse;
    }

    returntrue;
}

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Example:_Using_parse for more information.

Solution 4:

If you want to use forward slashes in the format, the you need to escape with back slashes in the regex:

   
var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;

Solution 5: 

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><script>functiondateCheck() {
        debugger;

        var inputValues = document.getElementById('dateInput').value + ' ' + document.getElementById('monthInput').value + ' ' + document.getElementById('yearInput').value;

        var d = newDate();
        var n = d.getHours();
        var m = d.getMinutes();
        var p = d.getSeconds();

        var date = document.getElementById("dateInput").value;
        var month = document.getElementById("monthInput").value;
        var year = document.getElementById("yearInput").value;

        var dateCheck = /^(0?[1-9]|[12][0-9]|3[01])$/;
        var monthCheck = /^(0[1-9]|1[0-2])$/;
        var yearCheck = /^\d{4}$/; 

        if (month.match(monthCheck) && date.match(dateCheck) && year.match(yearCheck)) {

            varListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            if (month == 1 || month > 2) {
                if (date > ListofDays[month - 1]) {
                    alert('Invalid date format!');
                    returnfalse;
                }
            }

            if (month == 2) {
                var leapYear = false;
                if ((!(year % 4) && year % 100) || !(year % 400)) {
                    leapYear = true;
                }

                if ((leapYear == false) && (date >= 29)) {
                    alert('Invalid date format!');
                    returnfalse;
                }

                if ((leapYear == true) && (date > 29)) {
                    alert('Invalid date format!');
                    returnfalse;
                }

            }
            var flag = 1
        }

        else {
            alert("invalid date");


        }
        if (flag == 1) {
            alert("the date is:" + inputValues + " " + "The time is:" + n + ":" + m + ":" + p);
        }

        clear();
    }

    functionclear() {
        document.myForm.dateInput.value = "";
        document.myForm.monthInput.value = "";
        document.myForm.yearInput.value = "";
    }


</script></head><body><div><formname="myForm"action="#"><table><tr><td>Enter Date</td><td><inputtype='text'name='dateInput'id="dateInput"placeholder="Date"maxlength="2"onclick="dateCheck(document.myForm.dateInput)"onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td><td><spanid="span1"></span></td></tr><tr><td>Enter Month</td><td><inputtype='text'name='monthInput'id="monthInput"placeholder="Month"maxlength="2"onclick="dateCheck(document.myForm.dateInput)"onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td><td><spanid="span2"></span></td></tr><tr><td>Enter Year</td><td><inputtype='text'name='yearInput'id="yearInput"placeholder="Year"minlength="4"maxlength="4"onclick="dateCheck()"onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td><td><spanid="span3"></span></td></tr><tr><td></td><td><inputtype="submit"name="submit"value="Submit"onclick="dateCheck()"/></td></tr></table></form></div></body></html><td>

Post a Comment for "Javascript Date Validation ( Dd/mm/yyyy) & Age Checking"