驗證打散最新寬度的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")); 
    } 
    });  
});