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.

Answer 1

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;
    }
}

Answer 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.

Answer 3

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.

Answer 4

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.