验证打散最新宽度的jQuery验证插件

Question

jQuery的验证插件来验证所有表单数据：http://docs.jquery.com/Plugins/Validation

有出生日期3个选择字段：日，月，年。

第一：我如何确保用户选择所有3个字段，并且只有当三个字段中的一个未被选中时才显示'无效'图标。例如，现在我有3个选择字段，但是当我选择第一个并且没问题时，即使未选择其他两个选择字段（月，年），插件也会显示“确定”图标。

第二：如何验证这3个选择字段，并确保在这3个​​选择字段中选择出生日期的人比18岁还早？

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

而且我设置一个“错误”图标是他们中的每一个后不显示，但毕竟他们：

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")); 
}, 

Answer 1

您使用$.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; 
    } 
    }, '<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")); 
    } 
    });  
});