validation分解日期宽度jQuery Validation插件
jQuery Validation插件用于validation所有表单数据: http : //docs.jquery.com/Plugins/Validation
出生日期有3个选择字段:日,月,年。
第一:如何确保用户选择所有3个字段,并且仅当未选择所有三个字段中的一个时才显示“无效”图标。 例如,现在我有3个选择字段,但是当我选择第一个并且没关系时,即使未选择其他两个选择字段(月,年),插件也会显示“确定”图标。
第二:如何validation这3个选择字段并确保在这3个选择字段中选择出生日期的人是否超过18年?
DD // day options MM // month options YYYY // year options
另外我设置了’错误’图标不是在每一个之后显示,而是在所有这些之后显示:
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
添加自定义方法
添加两个方法:一个用于检查所有3个选项( FullDate
),另一个用于检查年龄( Age
)。 由于3个元素是分组的,我只将一个方法放在一个选择器上,另一个放在另一个选择器上。
此外,您的errorPlacement
函数有一个if/else
,它完全相同,这是不必要的。
$(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; } }, ''); // 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; }, ''); $("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")); } }); });