Smart Validate: jQuery Credit Card Validation Plugin
If you’re conducting an online business, this jQuery plugin called Smart Validate will be a helpful addition to your website. Created by the egrappler.com web developers, it makes credit card validation easier and more convenient.
The following credit cards are supported by Smart Validate:
- Visa Card
- Master Card
- Discover
- American Express
- Diners Club
It can also be extended to support other credit cards types.
Add these in your head function of your HTML
- Add reference to the latest jQuery script
- Add reference to ccvalidate.js file
- Add reference to ccvalidate.css file
In your HTML document, add the following code below or use classes “cc-ddl-type”, “cc-card-number” and “cc-checkout” to existing elements as they are required since this jQuery plugin uses the classes to read the needed values.
<select>
<option value="mcd">Master Card</option>
<option value="vis">Visa Card</option>
<option value="amx">American Express</option>
<option value="dnr">Diner Club</option>
<option value="dis">Discover</option>
</select>
<input type="text">
<input value="Checkout" type="submit">
This plugin has only one parameter, which is the callback function. It returns a Boolean value which indicates if the credit card number is a valid format or not.
$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
if (!isValid) {
alert('Incorrect Credit Card format');
return false;
}
}
Below is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head> <title>jQuery Credit Card Validation Plugin Sample</title> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="ccvalidate.js" type="text/javascript"></script> <link href="ccvalidate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('.cc-container').ccvalidate({ onvalidate: function(isValid) { if (!isValid) { alert('Incorrect Credit Card format'); return false; } } }); }); </script></head><body> <div class="cc-container"> <select id="cc-types" class="cc-ddl-type"> <option value="mcd">Master Card</option> <option value="vis">Visa Card</option> <option value="amx">American Express</option> <option value="dnr">Diner Club</option> <option value="dis">Discover</option> </select> <input type="text" id="card-number" class="cc-card-number" /> <input type="submit" value="Checkout" class="cc-checkout" id="check-out" /> </div></body></html>
Check out the DEMO and DOWNLOAD.
0
496
