验证分解日期宽度jQuery验证插件 [英] Validating broken up date width jQuery Validation plugin
问题描述
jQuery验证插件用于验证所有表单数据: http://docs.jquery.com/插件/验证
jQuery Validation plugin is used to validate all form data: http://docs.jquery.com/Plugins/Validation
有3个选择字段用于出生日期:日,月,年。
Have 3 select fields for birth date: day, month, year.
第一:我如何确保用户选择所有3个字段,只有当所有三个字段中的一个未被选中时,才会显示无效图标。例如,现在我有3个选择字段,但是当我选择第一个并且没关系,即使没有选择其他两个选择字段(月,年),插件也会显示'ok'图标。
First: How i can make sure that user selects all 3 fields and 'invalid' icon is displayed only when one of all three fields is not selected. For example, now i have those 3 select fields, but when i select first and it's ok, then plugin displays 'ok' icon even if other two select fields (month, year) are not selected.
第二:我如何验证这3个选择字段,并确保在3个选择字段中选择哪个出生日期的人年龄大于18岁?
Second: How i can validate those 3 select fields and make sure that the person, which birth date is selected in those 3 select fields, is older than 18 years?
<select name="DOBd" id="DOBd">
<option value="">DD</option>
// day options
</select>
<select name="DOBm" id="DOBm">
<option value="">MM</option>
// month options
</select>
<select name="DOBy" id="DOBy">
<option value="">YYYY</option>
// year options
</select>
另外我设置了错误图标不是每个都显示,但毕竟他们:
Also i set up that 'error' icon is displayed not after each one of them, but after all of them:
groups:{
date_of_birth:"DOBd DOBm DOBy"
},
errorPlacement:function(error,element){
if (element.attr("name") == "DOBd" || element.attr("name") == "DOBm" || element.attr("name") == "DOBy")
error.appendTo(element.parent("td").next("td"));
else
error.appendTo(element.parent("td").next("td"));
},
推荐答案
您可以添加自定义方法使用 $。validator.addMethod
You can add custom methods using $.validator.addMethod
添加两种方法:一种用于检查所有3种选择( FullDate
),一个用于检查年龄( Age
)。
由于3个元素被分组,我只是在一个选择器上放置一个方法,另一个选择另一个选择器。
Add two methods: one for checking for all 3 selections (FullDate
) and one for checking age (Age
).
Since the 3 elements are grouped, I just put one method on one selector and the other on another selector.
另外,您的 errorPlacement
函数有一个,如果/ else
完全相同的事情,这是不必要的。
Also, your errorPlacement
function has an if/else
that does the exact same thing, which isn't necessary.
$(function() {
// this function requires month day and year selections
$.validator.addMethod("FullDate", function() {
//if all values are selected
if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
return true;
} else {
return false;
}
}, '<img src="/path/to/image.png" alt="Please select a day, month, and year" title="Please select a day, month, and year" />');
// this function checks the selected date, returning true if older than 18 years
$.validator.addMethod("Age", function() {
//only compare date if all items have a value
if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
//get selected date
var DOB = new Date($("#DOBy").val(), $("#DOBm").val(), $("#DOBd").val());
var eday = new Date(); //get today
eday.setFullYear(eday.getFullYear() - 18); //set to eighteen years ago
//if older than 18
if(DOB < eday) {
return true;
} else {
return false;
}
}
return true;
}, '<img src="/path/to/image.png" alt="Must be 18" title="Must be 18" />');
$("form").validate({
rules: {
DOBd: "FullDate",
DOBm: "Age"
},
groups:{
date_of_birth:"DOBd DOBm DOBy"
},
errorPlacement:function(error,element){
error.appendTo(element.parent("td").next("td"));
}
});
});
这篇关于验证分解日期宽度jQuery验证插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!