Solved

Using jquery validation, how do I validate a Date of Birth with 3 different select boxes?

Posted on 2010-11-10
5
730 Views
Last Modified: 2012-05-10
I have a signup form that I am validating using jquery, and I am trying to validate a Date of Birth that is spread across 3 different select boxes.

You can see this form at
http://www.rewardsring.com/sandbox/signup2V.html

My current approach is to create a hidden field next to the three select boxes and validate that instead (with the associated code necessary to build the value of that field).
I then wrote my own validation method (properDate) to make sure that dates like September 31st aren't permitted.
I also want the three select boxes to appear red if there is a problem with the date.

Unforunately, it doesn't seem to work at all, and I have no idea how to fix it, so any help is appreciated. (For example, Feb-31-1984 seems to be a valid date!?!?!)
0
Comment
Question by:sjamal_hsj
  • 3
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
dxdinh earned 500 total points
ID: 34106752
1.  you can add the check valid date function and test against
   

    var dob1 =   $("#user_dob").val();
  if (!checkDate(dob1)) {
        // focus if validation fails
       alert ('Please correct dob');
    }


2.  or you can pre populate based on user selection cascading
   Feb then populate 28 day
   if select leap year then populate 29 days....  of course you have to change a lot in your logic.



<!--
     Example File From "JavaScript and DHTML Cookbook"
     Published by O'Reilly & Associates
     Copyright 2003 Danny Goodman
-->

function checkDate(fld) {
    var mo, day, yr;
    var entry = fld.value;
    var re = /\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/;
    if (re.test(entry)) {
        var delimChar = (entry.indexOf("/") != -1) ? "/" : "-";
        var delim1 = entry.indexOf(delimChar);
        var delim2 = entry.lastIndexOf(delimChar);
        mo = parseInt(entry.substring(0, delim1), 10);
        day = parseInt(entry.substring(delim1+1, delim2), 10);
        yr = parseInt(entry.substring(delim2+1), 10);
        var testDate = new Date(yr, mo-1, day);
        alert(testDate)
        if (testDate.getDate() == day) {
            if (testDate.getMonth() + 1 == mo) {
                if (testDate.getFullYear() == yr) {
                    return true;
                } else {
                    alert("There is a problem with the year entry.");
                }
            } else {
                alert("There is a problem with the month entry.");
            }
        } else {
            alert("There is a problem with the date entry.");
        }
    } else {
        alert("Incorrect date format. Enter as mm/dd/yyyy.");
    }
    return false;
}
0
 

Author Comment

by:sjamal_hsj
ID: 34106782
In regards to the first solution, that doesn't really use jquery. Technically, using javascript, I know how to test for a valid date, but I wanted to do it using the jquery validation plugin.

For the second solution, it would work, but it does require a large amount of extra code. Also, it wouldn't solve my problem of validating 3 select boxes as a group using jquery.

Thanks for the input though
0
 
LVL 7

Expert Comment

by:dxdinh
ID: 34107268
I guess the question s/b how to extend jQuery validation plugin to date selection drop down list box.
0
 

Author Comment

by:sjamal_hsj
ID: 34107751
To be honest, I'm not sure if it needs to be extended. I'm new to jquery, and I was wondering if it was possible, using the jquery validation plugin, to validate a date that uses 3 select boxes.

If not, then I suppose I can change it to an input box.
0
 

Author Closing Comment

by:sjamal_hsj
ID: 36185160
my question was perhaps more vague than it needed to be
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now