Javascript 使用jQuery验证验证多个文本框日期
我正在尝试编写一个自定义方法来验证日期。但是,日期存在于三个文本框中。此外,此日期可能有多个实例Javascript 使用jQuery验证验证多个文本框日期,javascript,jquery,validation,Javascript,Jquery,Validation,我正在尝试编写一个自定义方法来验证日期。但是,日期存在于三个文本框中。此外,此日期可能有多个实例 <div class="customDate"> <input class="month" id="dob_Month" maxlength="2" name="dob.Month" type="text" /> / <input class="day" id="dob_Day" maxlength="2"
<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>
不过,验证功能没有启动。我错过了什么?还有,有没有更好的方法来做到这一点
注意:我已经删除了实际验证逻辑的功能。我只需要知道如何启动验证方法 我非常确定验证插件只支持验证输入,而不支持任意DOM元素。elements功能过滤掉任何非元素以及提交、重置、图像按钮和禁用的输入
您需要做的是为月份、日期和年份设置验证器。为了执行正确的验证逻辑,月和日需要相互引用对方的值。在验证之前,我会尝试在表单提交上触发一个事件,将各个日/月/年输入的值附加到一个单独的隐藏输入中,然后验证隐藏的输入。添加一个隐藏字段
<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" />
然后验证隐藏的值。我已经按照 并作出相应的修订
- 不过可能有点过分:)
是否有任何方式来汇总错误…这样我就不需要月份,日期,年份了。我想我可以这样做:如果月份无效,跳过日期和年份的验证?这非常有用,我在隐藏字段中添加了一个minlength以确保所有元素都已被选中。您可能需要在该隐藏字段上触发keyup事件,以便一切正常。由于某种原因,仅对隐藏字段执行val(…)时,不会触发验证。。因此将其更改为:$('生日').val($('日').val()+'/'+$('月').val()+'/'+$('年').val()).trigger('keyup');
<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());
});
<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"> </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"> </div>
</div>
<br />
<input name="submit" type="submit" value="Submit" class="submit" title="Submit"/>
</div>
// 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);
}
});
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;
}
}