comment valider les cartes de crédit en utilisant jquery.validation creditcard2?

Question

J'espérais que quelqu'un puisse me diriger dans la bonne direction. Je cherche à utiliser this plugin avec le plugin jquery.validation dans mes formulaires, mais d'après ce que je vois, j'aurais besoin d'utiliser une balise select pour que creditcard2 fonctionne correctement.

Ce que j'ai actuellement est la suivante:

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

valeur = 1000 est "Visa"

valeur = 1002 est "MasterCard"

valeur = 1006 est "Discover"

valeur = 1004 est "AmEx"

Le site du plug-in mentionne la création d'une recherche hash. Je ne sais pas comment en créer un. Aussi la documentation qui est sur le site montre seulement des exemples en utilisant <select></select>. J'utilise des entrées.

Comment puis-je faire en sorte que cela fonctionne avec la configuration que j'ai actuellement.

des suggestions?

Answer 1

Un hachage de recherche ressemblerait

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

Ensuite, vous pouvez utiliser la fonction de validation suivante, bien sûr intégré dans votre configuration actuelle:

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

Ce code plutôt concise recherche d'abord tous les inputs dans votre .ccType élément. Ensuite, il sélectionne celui qui est coché (le cas échéant) et obtient sa valeur. Ensuite, la valeur est poussée à travers le hachage pour le changer à une valeur que le plugin aime. Et ... espérons que cela fonctionne.