如何使用jquery.validation creditcard2驗證信用卡？

Question

我一直希望有人能指出我正確的方向。我正在尋找在我的表單中使用this plugin以及jquery.validation插件，但是從我所看到的我需要使用選擇標記才能使creditcard2正常工作。

我現在有是這樣的：

<p class="ccType"> 
    <label for="card_type" class="error">You must select a credit card from one of the following.</label> 
     <br> 
    <input type="radio" value="1000" id="card_type_1000" name="card_type" style="outline:none; border:none;" /> 
     <img src="../visa.png" alt="Visa" width="50" height="30" align="top" /> 
     <input type="radio" value="1002" id="card_type_1002" name="card_type" style="outline:none; border:none;" /> 
     <img src="../mastercard.png" alt="Mastercard" width="50" height="30" align="top" /> 
     <input type="radio" value="1006" id="card_type_1006" name="card_type" style="outline:none; border:none;" /> 
     <img src="../discover.png" alt="Discover" width="50" height="30" align="top" /> 
     <input type="radio" value="1004" id="card_type_1004" name="card_type" style="outline:none; border:none;" /> 
     <img src="../amex.png" alt="American Express" width="50" height="30" align="top" /> 
    </p> 

值= 1000是 「簽證」

值= 1002是 「萬事達卡」

值= 1006是 「發現」

值= 1004是「美國運通」

插件站點提到創建查找哈希值。我不知道如何創建一個。此外，網站上的文檔僅顯示使用<select></select>的示例。我正在使用輸入。

我如何能得到這個與設置，我現在有工作。

有什麼建議嗎？

Answer 1

的查找哈希看起來像

var hash = { 
    1000: "Visa", 
    1002: "MasterCard", 
    1004: "AmEx", 
    1006: "Discover" 
}; 

那麼你可以使用下面的驗證功能，當然內置到您的當前設置的：

$("#myform").validate({ 
    rules: { 
     cardnum: { // this should be the id of the card number field 
      creditcard2: function(){ return hash[$('.ccType > input:checked').val()]; } 
     } 
    }  
}); 

這個相當簡潔的代碼首先查找所有inputs在您的.ccType元素中。然後它選擇一個被檢查的（如果有的話）並獲得它的值。然後將值通過散列推入，以將其更改爲插件所喜歡的值。而且...讓我們希望這個工程。