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

Question

我正在尝试编写一个自定义方法来验证日期。然而，这个日期存在于三个文本框中。此外，可能会有多个此日期的实例。

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

当提交表单时，我想要验证包含customDate类的任何div。也就是说，确保所有方框都已填写，确保范围正确等等。我正在使用以下代码：

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

验证函数没有触发，我错过了什么？此外，有更好的方法吗？

注意：我已经为实际验证逻辑存根。我只需要知道如何使验证方法触发。

- ckarbass

Answer 1

我已经成功创建了多个字段验证，而没有使用隐藏字段，按照http://docs.jquery.com/Plugins/Validation/multiplefields的指南进行，并相应地进行修改。

• 但这可能有点过度了 :)

HTML代码

<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 代码

 // 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 代码

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

- james goldswain

Answer 2

您需要添加一个隐藏字段。

<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"  /> 

然后将隐藏字段中的值连接起来，并验证该字段。

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

然后验证隐藏值。

- ahvargas

---

这非常有用，我在隐藏字段上添加了一个minlength以确保选择了所有元素。 - Tom

你可能需要在隐藏字段上触发keyup事件，这样一切才能正常工作。由于某些原因，在隐藏字段上仅进行val(...)操作时不会触发验证...所以可以将它更改为：$('#birthday').val($('#day').val()+'/'+ $('#month').val()+'/'+ $('#year').val()).trigger('keyup'); - Alex

Answer 3

在验证之前，我建议您尝试在表单提交时触发一个事件，在该事件中将各个日/月/年输入字段的值附加到一个单独的隐藏字段中，然后对隐藏字段进行验证。

- Rudism

Answer 4

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

你需要做的是为月份、日期和年份设置验证器。月份和日期需要引用彼此的值，以执行正确的验证逻辑。

- tvanfosson

---

有没有办法将错误信息汇总起来，这样我就不会看到“月份是必需的”，“日期是必需的”，“年份是必需的”这些信息了。我猜我可以这样做：如果月份无效，则跳过对日期和年份的验证？ - ckarbass