Validate a condition in HTML form using javascript

Question

I want to create an HTML page with small form.

It Contain

Name
Gender
Date of Birth
I Agree checkbox
Submit button

There should be a condition. If the age is between 20 & 25 [Calculated based on DOB] the "I Agree" Checkbox should be activated or else it should be deactivated.

Deactivation means, I agree box should not accept any check input.

    
    function myAgeValidation() {
    
        var lre = /^\s*/;
        var datemsg = "";
       
        var inputDate = document.as400samplecode.myDate.value;
        inputDate = inputDate.replace(lre, "");
        document.as400samplecode.myDate.value = inputDate;
        datemsg = isValidDate(inputDate);
            if (datemsg != "") {
                alert(datemsg);
                return;
            }
            else {
                //Now find the Age based on the Birth Date
                getAge(new Date(inputDate));
            }
    
    }
    
    function getAge(birth) {
    
        var today = new Date();
        var nowyear = today.getFullYear();
        var nowmonth = today.getMonth();
        var nowday = today.getDate();
    
        var birthyear = birth.getFullYear();
        var birthmonth = birth.getMonth();
        var birthday = birth.getDate();
    
        var age = nowyear - birthyear;
        var age_month = nowmonth - birthmonth;
        var age_day = nowday - birthday;
       
        if(age_month < 0 || (age_month == 0 && age_day <0)) {
                age = parseInt(age) -1;
            }
        //alert(age);
       
        if ((age <= 25 ) && ( age >= 20)) {
    document.as400samplecode.agree.disabled=false;
    
    }
        else {
            alert("age limit is 20 - 25");
        }
    
    }
    
    function isValidDate(dateStr) {
    
       
        var msg = "";
     
        var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
    
        var matchArray = dateStr.match(datePat); // is the format ok?
        if (matchArray == null) {
            msg = "Date is not in a valid format.";
            return msg;
        }
    
        month = matchArray[1]; // parse date into variables
        day = matchArray[3];
        year = matchArray[4];
    
       
        if (month < 1 || month > 12) { // check month range
            msg = "Month must be between 1 and 12.";
            return msg;
        }
    
        if (day < 1 || day > 31) {
            msg = "Day must be between 1 and 31.";
            return msg;
        }
    
        if ((month==4 || month==6 || month==9 || month==11) && day==31) {
            msg = "Month "+month+" doesn't have 31 days!";
            return msg;
        }
    
        if (month == 2) { // check for february 29th
        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
        if (day>29 || (day==29 && !isleap)) {
            msg = "February " + year + " doesn't have " + day + " days!";
            return msg;
        }
        }
    
        if (day.charAt(0) == '0') day= day.charAt(1);
       
        //Incase you need the value in CCYYMMDD format in your server program
        //msg = (parseInt(year,10) * 10000) + (parseInt(month,10) * 100) + parseInt(day,10);
       
        return msg;  // date is valid
    }

<html>
    <head>
    </head>
    <body>
    
  
    <form name="as400samplecode">
    
    Name: <input type="text" name="namee" required><br>
    <br>
    gender: <input type="radio" name="sex" value="male">Male<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="female">Female<br>
    <br>
    <input type="text" name="myDate" size=10 maxlength=10> (in MM/DD/YYYY format)<br>
    <br>
    <br>
    <br>
    <input type = "checkbox" name="agree" disabled  >I, Agree<br>
    <br>
    <br>
    <input type="button" value="Submit"  onclick="Javascript:myAgeValidation()" >
    </form>
    
    </body>
    
    </html>

So what exactly is the problem? – Scott Apr 09 '15 at 17:36 — Scott, Apr 09 '15 at 17:36

score 0 · Answer 1 · edited May 23 '17 at 12:06

One solution would be to add an "oninput" event to the myDate input element that executes the myAgeValidation function each time the input element's value is changed.

<input type="text" name="myDate" size=10 maxlength=10 oninput="myAgeValidation()">(in MM/DD/YYYY format)

If the element's value it is a valid date, the next step is to check the age range. If the value is within the 20 - 25 range, you can enable the checkbox. Just make sure you set your checkbox back to disabled in case someone enters an acceptable 20-25 age, and then changes it back to something else.

See example solution here: https://jsfiddle.net/z6hnu7qn/

Optional: I added green, pink, and red css borders to the input field depending on the dates acceptability.

I would also recommend looking at other ways to validate your date string. Just returning an empty string if it's valid and checking if datemsg is an empty string to proceed could lead to problems down the line.

Here is a question addressing date validation in javascript:

How to validate date with format "mm/dd/yyyy" in JavaScript?

There are also a number of popular libraries, like angularjs, that do date validation.

Validate a condition in HTML form using javascript

1 Answers1

Linked