Solved

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

Posted on 2010-11-10
5
736 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

688 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