Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction. Smart Validate supports the following credit cards.
- American Express
- Master Card
- Visa Card
- Diners Club
- Discover
The plugin can be easily extended to support other credit card types.
Using Smart Validate
In your HTML file add the following in the head section.
- Add a reference to latest jQuery script
- Add a reference to ccvalidate.js file
- Add a reference to ccvalidate.css file
Add the code below to your HTML document or use classes “cc-ddl-type”, “cc-card-number” and “cc-checkout” to existing elements. These classes are mandatory as the smart validate plugin uses these classes to read the required values.
Smart Validate plugin has only one parameter that is a callback function to be called, that returns a boolean value indicating whether the credit card number is in valid format or not. See the example below to see how it works.
$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
if (!isValid) {
alert('Incorrect Credit Card format');
return false;
}
}
Here is the full code for the example above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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>
Pingback: 30 Most Useful jQuery Plugins | web3mantra
Pingback: My 2012 web design and marketing round-up of all things awesome.
Pingback: 21 of the most commonly used jQuery plugin demo and download Web Page Design | Web Page Design Templates | Html5 Template
Pingback: Useful JavaScript Libraries and jQuery Plugins Part 1 « OhMyDev
Pingback: Useful JavaScript Libraries and jQuery Plugins | Top website Designing Company in India
Pingback: Knowledge Sharing | Useful JavaScript Libraries and jQuery Plugins
Pingback: 10 (More) jQuery Plugins That Enhance Your Forms / Photoshop CS6 Download
Pingback: Useful JavaScript Libraries and jQuery Plugins | Gold Coast Creative Agency | 24hr Design Quotes
Pingback: Useful JavaScript Libraries and jQuery Plugins | BoonJack Media || We make Multimedia easy.
Pingback: Useful JavaScript Libraries and jQuery Plugins | Elitewebworks-Web Design and Development
Pingback: Useful JavaScript Libraries and jQuery Plugins | Wordpress Themes
Pingback: Useful JavaScript Libraries and jQuery Plugins | AdsPuppy.com Read Able
Pingback: Useful JavaScript Libraries and jQuery Plugins | Designer Brisbane blog
Pingback: Today’s UX Links | Erie Design Partners
Pingback: Useful JavaScript Libraries and jQuery Plugins | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design
Pingback: Useful JavaScript Libraries and jQuery Plugins | Diancin Designs
Pingback: Useful JavaScript Libraries and jQuery Plugins |
Pingback: Useful JavaScript Libraries and jQuery Plugins | RIVER_DIGITAL
Pingback: Useful JavaScript Libraries and jQuery Plugins - Steve deGuzman
Pingback: Useful JavaScript Libraries and jQuery Plugins | Web Design Kingston
Pingback: Useful JavaScript Libraries and jQuery Plugins
Pingback: » Useful JavaScript Libraries and jQuery Plugins (Pablo Gallego Falcón)
Pingback: Useful JavaScript Libraries and jQuery Plugins | DigitalMofo
Pingback: Today’s Links | JohnAspinall.co.uk
Pingback: Useful JavaScript Libraries and jQuery Plugins « Blog de xkortazar
Pingback: Useful JavaScript Libraries and jQuery Plugins | TuTsRUS - All Adobe Tutorials - Photoshop | Illustrator | Encore | Premeire | After Effects
Pingback: Useful JavaScript Libraries and jQuery Plugins | Buypappa blog
Pingback: Useful JavaScript Libraries and jQuery Plugins | TheSite.me
Pingback: Useful JavaScript Libraries and jQuery Plugins | MyOfflineTheme.com Skyrocket Your Offline Business Just Now
Pingback: Useful JavaScript Libraries and jQuery Plugins | t1u
Pingback: 20+ Useful jQuery Plugins That Will Improve User Experience On Your Website | Wordpress Themes
Pingback: 20+ Useful jQuery Plugins That Will Improve User Experience On Your Website | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Pingback: Useful jQuery Plugins That Will Improve User Experience On Your Website | Top Design Magazine - Web Design and Digital Content
Pingback: 60 jQuery Plugins You Should Try Today « C++
Pingback: Top 35 Essential jQuery Form Plugins and Libraries You'll Actually Need - Medley Web Design Blog
Pingback: 60 jQuery Plugins You Should Try Today - SloDive
Pingback: 40 Plugins jQuery gratuítos | 2puntos2barras
Pingback: The 50 Most Useful jQuery Plugins from 2011 - Speckyboy Design Magazine
Pingback: blog.topwebdevelop.com » Blog Archive » Brand New and Extremely Awesome jQuery Plugins
Pingback: 60 jQuery Plugins You Should Try Today | 网络钻头
Pingback: O futuro presente Jquery e CSS3 – Lista com os últimos lançamentos até 06/2012 | Desenvolvedor, Webdesigner e Pesquisador | deivison.com.br
Pingback: 15 jQuery Plugins for Simple & Effective Forms User Interface | Blog for designers web developers bloggers freelancers SEO
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Smashing Magazine
Pingback: 9 Highly Useful Form & Validation jQuery Plugins | codeManiac - Snippets, Templates, API and the best developer content
Pingback: 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag
Pingback: 15 Simple & Effective jQuery Plugins that Enhance Your Forms
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Wordpress Themes
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | BoonJack Media || We make Multimedia easy.
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Web Designer Bacolod City | Ricky Noel Diancin Jr. Webmaster | Wordpress Expert
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Ruturaj Pradeep Kohok | Your Web Advisor
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! : Rutweb Technology
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Gold Coast Creative Agency | 24hr Design Quotes
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Gold Coast Creative Agency | 24hr Design Quotes
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Designer Brisbane blog
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | e-wok.fr, le blog
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win!
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | DigitalMofo
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Strona dla FIRMY
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! — Technology That
Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win!
Pingback: Os 50 mais úteis plugins jQuery | Site para Empresas – Blog sobre Internet e Criação de Site
Pingback: Smart Validate - jQuery Plugin to Make Credit Card Validation | Smashzine
Pingback: Be a Professional Developer Using Ultimate jQuery Plugins | Passcomms Android
Pingback: 40款非常有用的 jQuery 插件推荐(一) | 前端爱好者-崔超
Pingback: Top ten best jQuery Plugins | TechnFuture Blog
Pingback: Smart Validate: jQuery Credit Card Validation Plugin
Pingback: The best 120+ Jquery plugins from around the internet
Pingback: 30+ jQuery Plugins for Web Designers 2012 | Ulancer Blog
Pingback: blog.aparajayah » Blog Archive » jQuery Credit-Card Validation Plugin
Pingback: 9 Highly Useful Form & Validation jQuery Plugins | blogfreakz.com
Pingback: jquery by uprod - Pearltrees
Pingback: 10 jQuery Plugins That Enhance Your Forms | Ahmad Assaf`s Blog
Pingback: 10 jQuery Plugins That Enhance Your Forms | AEXT.NET MAGAZINE
Pingback: 28 Most Useful jQuery Plugins from 2011 | 1step web design: Best for developer and designer
07/01/2012 @ 11:38 pm
Hey, could not run this demo….followed the regular expression n have input the card no. but everytime it gives the error…need help plz
Pingback: Brand New and Extremely Awesome jQuery Plugins | Webdesign artikelen
Pingback: Top 50 JavaScript,jQuery Plugins and Tutorials From 2011
Pingback: Most Useful jQuery Plugins from 2011 – Form & Validation | ChurchMag
Pingback: 85 Best jQuery Plugin 2011 | Learn Web Design
Pingback: 40款非常有用的 jQuery 插件推荐（系列一） – 峰随意动，尽从容！
Pingback: Подборка полезных JQuery плагинов за 2011 год | TechnoVzor
Pingback: Los 50 plugins jQuery más útiles de 2011 | loureyro.com.ar
Pingback: Gerris » Smart Validate – jQuery Credit Card Format Validation
Pingback: UK Web Design Now! » Post Topic » What’s new for designers, December 2011
Pingback: What’s new for designers, December 2011 | Web Design
Pingback: What’s new for designers, December 2011 | Best Web Magazine
Pingback: What’s new for designers, December 2011 « HavaLink
Pingback: What’s new for designers, December 2011 » We Love Brisbane – Website Design
Pingback: What’s new for designers, December 2011 | linuxin.ro
Pingback: The 50 Most Useful jQuery Plugins from 2011 | Typography Blog
Pingback: Smart Validate - JQuery Credit Card Validation Plugin | Coderbay
Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com
Pingback: 40+ Useful and Fresh jQuery Plugins
Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40+ Useful and Fresh jQuery Plugins
Pingback: Top Wordpress jQuery Plugins-Nihad Nagi
Pingback: Roundup of 25 Ovan Fresh jQuery plug-ins | Web Design Burn
Pingback: 40 jQuery Eklentisi | M-Ozdemir.Com
Pingback: disconnesso » Resources and links – 30 September 2011
Pingback: Web Development articles, tutorials, help » Blog Archive » 40 New jQuery Plugins
Pingback: 40 New jQuery Plugins
Pingback: 21 Useful jQuery Plugins | designerbooster
Pingback: Credit Card Validation using jQuery
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines
Pingback: Smart Validate – A jQuery Credit Card Validation Plugin | CodeBuzz Blog - Useful articles and links on IT Outsourcing, Open Source Solutions, Web Design Services, Web Development, Search Engine Optimization
Pingback: Validazione carte di credito con un plugin jQuery | Wiki Future
Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011
Pingback: Validazione carte di credito con un plugin jQuery | Edit - Il blog di HTML.it
Pingback: クレジットカードの入力チェックが出来るjQueryプラグイン「Smart Validate」 | Web活メモ帳
Pingback: jQuery Credit Card Validation Plugin | BlogUpstairs
Pingback: Qink | A Credit Card Validation jQuery Plugin
12/07/2011 @ 5:29 pm
Thats great , i hope i can integrate it well on my payment gateway on my money sites
Pingback: 50 new cool and crazy jQuery plugins
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Cairns Web Design
22/06/2011 @ 6:36 pm
Hey man, This is awesome !!
i’ve looking this application for days, tanx a lot !!
i like learn more jquery, ajax, css, html apps and tricks, so your tutorial is very usefull !
tanx again and youre the best !! \m/_
and sorry for my bad english but i dont practice too much XD