Validating Multiple Textbox Date with jQuery Validate

Question

I'm trying to write a custom method to validate a date. The date however exists in three text boxes. Furthermore, there may be multiple instances of this date.

    <div class="customDate"> 
        <input class="month" id="dob_Month" maxlength="2" name="dob.Month" type="text"  /> 
        /
        <input class="day" id="dob_Day" maxlength="2" name="dob.Day" type="text" /> 
        /
        <input class="year" id="dob_Year" maxlength="4" name="dob.Year" type="text"  /> 
    </div>

On submit, I'd like to validate any div containing the customDate class. I.e. make sure all boxes have been filled, make sure ranges are correct, etc. I'm using the following code:

$.validator.addMethod("customDate", function(element) { return false;}, "error message");

The validation function isn't firing however. What am I missing? Also, is there a better way to do this.

Note: I've stubbed out the functionality for the actual validation logic. I just need to know how to get the validation method to fire.

james goldswain · Accepted Answer · 2010-01-12 13:51:26Z

I have managed to create multiple field validation without use of a hidden field by following the guide at http://docs.jquery.com/Plugins/Validation/multiplefields and amending it accordingly

might be overkill though :)

html code

<div class="whatever">

    <!-- dob html -->
    <div id="dobdate">
    <select name="dobday" class="dateRequired" id="dobday">
             <option value="">Day</option>
         <option value="1">1</option>
    </select>

    <select name="dobmonth" class="dateRequired" id="dobmonth">
         <option value="">Month</option>
         <option value="January">January</option>
    </select>

    <select name="dobyear" class="dateRequired" id="dobyear">
             <option value="">Year</option>
         <option value="2010">2010</option>
    </select>
    <div class="errorContainer">&nbsp;</div>
    </div>

    <br />

    <div id="joinedate">
    <!-- date joined html -->
    <select name="joinedday" class="dateRequired" id="joinedday">
           <option value="">Day</option>
           <option value="1">1</option>
    </select>

    <select name="joinedmonth" class="dateRequired" id="joinedmonth">
         <option value="">Month</option>
         <option value="January">January</option>
    </select>

    <select name="joinedyear" class="dateRequired" id="joinedyear">
            <option value="">Year</option>
        <option value="2010">2010</option>
    </select>
    <div class="errorContainer">&nbsp;</div>
    </div>
        <br />
    <input name="submit" type="submit" value="Submit" class="submit" title="Submit"/>
</div>

jquery code

 // 1. add a custom validation method

 $.validator.addMethod("CheckDates", function(i,element) 
 {
      // function with date logic to return whether this is actually a valid date - you'll need to create this to return a true/false result
      return IsValidDate(element);

 }, "Please enter a correct date");

 // 2. add a class rule to assign the validation method to the relevent fields - this sets the fields with class name of "dateRequired" to be required and use the method youve set up above

 $.validator.addClassRules({
     dateRequired: { required:true, CheckDates:true}
 });

// 3. add a validation group (consists of the fields you want to validate)

$("#myForm").validate(
{
    submitHandler: function() 
    {
         alert("submitted!");
    },
    groups: 
    {
                dob: "dobyear dobmonth dobday", joined : "joinedyear joinedmonth joinedday"
    },
    messages: { dob : " ", joined : " " // sets the invidual errors to nothing so that only one message is displayed for each drop down group 
    },
    errorPlacement: function(error, element) 
    {
       element.parent().children(".errorContainer").append(error);
    }
});

JavaScript code

function IsValidDate(_element)
{
    // just a hack function to take an element, get the drop down fields within it with a particular class name ending with day /month/ year and perform a basic date time test
    var $dateFields =  $("#" + _element.id).parent();

    day = $dateFields.children(".dateRequired:[name$='day']");
    month = $dateFields.children(".dateRequired:[name$='month']");
    year = $dateFields.children(".dateRequired:[name$='year']");

    var $newDate = month.val() + " " + day.val() + " " + year.val();

    var scratch = new Date($newDate );

    if (scratch.toString() == "NaN" || scratch.toString() == "Invalid Date") 
    {
        return false;
    } else {
        return true;
    }
}

Rudism · Accepted Answer · 2009-11-12 22:20:09Z

2

I would try triggering an event on form submit before the validation which appends the values from the individual day/month/year inputs together into a separate hidden input, and then validate the hidden input instead.

answered Nov 12, 2009 at 22:20

Rudism

1,67512 silver badges13 bronze badges

Comments

ahvargas · Accepted Answer · 2009-11-25 10:30:33Z

2

You add a hidden field

<input id="month" maxlength="2" name="month" type="text"  /> 
<input id="day" maxlength="2" name="day" type="text" /> 
<input id="year" maxlength="4" name="year" type="text"  /> 

<input id="birthday"  name="birthday" type="text"  />

then concatenate the values in the hidden, and validate that field.

$('#day,#month,#year').change(function() {  
  $('#birthday').val($('#day').val()+'/'+ $('#month').val()+'/'+ $('#year').val());
});

then validate the hidden value.

answered Nov 25, 2009 at 10:30

ahvargas

90210 silver badges17 bronze badges

2 Comments

Tom Over a year ago

This is really useful, I added a minlength onto the hidden field to ensure all elements had been selected.

Alex Over a year ago

you may need to trigger keyup event on that hidden field so everything work fine. validation isn't triggered when you just do val(...) on a hidden field for some reason.. so would change it to :$('#birthday').val($('#day').val()+'/'+ $('#month').val()+'/'+ $('#year').val()).trigger('keyup');

tvanfosson · Accepted Answer · 2009-11-12 19:01:12Z

1

I'm pretty sure that the validation plugin only supports validating inputs, not arbitrary DOM elements. The elements function filters out anything that isn't an element as well as submit, reset, image buttons and disabled inputs.

What you'd want to do is have validators for month, day, and year. Month and day would need to reference each other's values in order to perform correct validation logic.

answered Nov 12, 2009 at 19:01

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

1 Comment

ckarbass Over a year ago

is there anyway to roll up the errors...so that I dont have Month is required, day is required, year is required. I guess I could do: if Month isn't valid, skip validation for day and year?

Collectives™ on Stack Overflow

Validating Multiple Textbox Date with jQuery Validate

4 Answers 4

html code

jquery code

JavaScript code

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

html code

jquery code

JavaScript code

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related