使用jQuery验证多个文本框日期

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:

在提交时，我想验证包含customDate类的任何div。例如，确保所有的盒子都已填满，确保范围正确等等。我使用的代码如下:

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

注意:我已经为实际的验证逻辑设计了功能。我只需要知道如何让验证方法启动。

4 个解决方案

#1

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.

我将尝试在表单提交之前触发一个事件，该事件将单个日/月/年输入的值添加到一个单独的隐藏输入中，然后验证隐藏的输入。

#2

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

通过遵循http://docs.jquery.com/Plugins/Validation/multiplefields的指南并对其进行相应的修改，我成功地创建了多个字段验证，而没有使用隐藏字段

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

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

然后验证隐藏的值。

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

我确信验证插件只支持验证输入，而不支持任意的DOM元素。元素函数会过滤掉任何不是元素的元素，以及提交、重置、图像按钮和禁用的输入。

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.

你想要做的是有一个月、一天、一年的验证器。为了执行正确的验证逻辑，月和日需要引用彼此的值。