thatsus / credit_card_validator
Installs: 19
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Language:HTML
This package is auto-updated.
Last update: 2024-11-18 05:05:47 UTC
README
This is a jquery credit card validator from jqueryscript.net
A simple jQuery plugin to check and display the credit card type as the user types, and to provide Bootstrap validation classes for Luhn check once the correct length has been verified.
How to use it:
- Include the necessary jQuery library and Bootstrap's CSS in the web page.
- Create a text field for credit card input.
4. The CSS to add a default credit card image into the credit card input.
1 #checkout_card_number { 2 background-image: url(cards.png); 3 background-position: 3px 3px; 4 background-size: 40px 252px; 5 background-repeat: no-repeat; 6 padding-left: 48px; 7 } 5. The Javascript.
var ('#checkout_card_number'); $('#checkout_card_number').validateCreditCard(function(result) {
if (result.card_type != null) {
switch (result.card_type.name) { case "visa": $cardinput.css('background-position', '3px -34px'); $cardinput.addClass('card_visa'); break;
case "visa_electron": $cardinput.css('background-position', '3px -72px'); $cardinput.addClass('card_visa_electron'); break;
case "mastercard": $cardinput.css('background-position', '3px -110px'); $cardinput.addClass('card_mastercard'); break;
case "maestro": $cardinput.css('background-position', '3px -148px'); $cardinput.addClass('card_maestro'); break;
case "discover": $cardinput.css('background-position', '3px -186px'); $cardinput.addClass('card_discover'); break;
case "amex": $cardinput.css('background-position', '3px -223px'); $cardinput.addClass('card_amex'); break;
default: $cardinput.css('background-position', '3px 3px'); break; } } else { $cardinput.css('background-position', '3px 3px'); }
// Check for valid card numbers - only show validation checks for invalid Luhn when length is correct so as not to confuse user as they type. if (result.length_valid || $cardinput.val().length > 16) { if (result.luhn_valid) { $cardinput.parent().removeClass('has-error').addClass('has-success'); } else { $cardinput.parent().removeClass('has-success').addClass('has-error'); } } else { $cardinput.parent().removeClass('has-success').removeClass('has-error'); } });