Fork me on GitHub
Post Format

jQuery Credit Card Validation Plugin: Smart Validate

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>

No related posts.

119 comments

  1. Pingback: JQuery | Pearltrees

  2. Pingback: 15 jQuery Tools for Awesome WebsitesTechie Information | Technology News And Reviews | Techie Information | Technology News And Reviews

  3. Pingback: 30 Most Useful jQuery Plugins | web3mantra

  4. Pingback: My 2012 web design and marketing round-up of all things awesome.

  5. Pingback: 21 of the most commonly used jQuery plugin demo and download Web Page Design | Web Page Design Templates | Html5 Template

  6. Pingback: Useful JavaScript Libraries and jQuery Plugins Part 1 « OhMyDev

  7. Pingback: Useful JavaScript Libraries and jQuery Plugins | Top website Designing Company in India

  8. Pingback: Knowledge Sharing | Useful JavaScript Libraries and jQuery Plugins

  9. Pingback: 10 (More) jQuery Plugins That Enhance Your Forms / Photoshop CS6 Download

  10. Pingback: Useful JavaScript Libraries and jQuery Plugins | Gold Coast Creative Agency | 24hr Design Quotes

  11. Pingback: Useful JavaScript Libraries and jQuery Plugins | BoonJack Media || We make Multimedia easy.

  12. Pingback: Useful JavaScript Libraries and jQuery Plugins | Elitewebworks-Web Design and Development

  13. Pingback: Useful JavaScript Libraries and jQuery Plugins | Wordpress Themes

  14. Pingback: Useful JavaScript Libraries and jQuery Plugins | AdsPuppy.com Read Able

  15. Pingback: Useful JavaScript Libraries and jQuery Plugins | Designer Brisbane blog

  16. Pingback: Today’s UX Links | Erie Design Partners

  17. Pingback: Useful JavaScript Libraries and jQuery Plugins | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design

  18. Pingback: Useful JavaScript Libraries and jQuery Plugins | Diancin Designs

  19. Pingback: Useful JavaScript Libraries and jQuery Plugins |

  20. Pingback: Useful JavaScript Libraries and jQuery Plugins | RIVER_DIGITAL

  21. Pingback: Useful JavaScript Libraries and jQuery Plugins - Steve deGuzman

  22. Pingback: Useful JavaScript Libraries and jQuery Plugins | Web Design Kingston

  23. Pingback: Useful JavaScript Libraries and jQuery Plugins

  24. Pingback: » Useful JavaScript Libraries and jQuery Plugins (Pablo Gallego Falcón)

  25. Pingback: Useful JavaScript Libraries and jQuery Plugins | DigitalMofo

  26. Pingback: Today’s Links | JohnAspinall.co.uk

  27. Pingback: Useful JavaScript Libraries and jQuery Plugins « Blog de xkortazar

  28. Pingback: Useful JavaScript Libraries and jQuery Plugins | TuTsRUS - All Adobe Tutorials - Photoshop | Illustrator | Encore | Premeire | After Effects

  29. Pingback: Useful JavaScript Libraries and jQuery Plugins | Buypappa blog

  30. Pingback: Useful JavaScript Libraries and jQuery Plugins | TheSite.me

  31. Pingback: Useful JavaScript Libraries and jQuery Plugins | MyOfflineTheme.com Skyrocket Your Offline Business Just Now

  32. Pingback: Useful JavaScript Libraries and jQuery Plugins | t1u

  33. Pingback: 20+ Useful jQuery Plugins That Will Improve User Experience On Your Website | Wordpress Themes

  34. Pingback: 20+ Useful jQuery Plugins That Will Improve User Experience On Your Website | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  35. Pingback: Useful jQuery Plugins That Will Improve User Experience On Your Website | Top Design Magazine - Web Design and Digital Content

  36. Pingback: 60 jQuery Plugins You Should Try Today « C++

  37. Pingback: Top 35 Essential jQuery Form Plugins and Libraries You'll Actually Need - Medley Web Design Blog

  38. Pingback: 60 jQuery Plugins You Should Try Today - SloDive

  39. Pingback: 40 Plugins jQuery gratuítos | 2puntos2barras

  40. Pingback: The 50 Most Useful jQuery Plugins from 2011 - Speckyboy Design Magazine

  41. Pingback: blog.topwebdevelop.com » Blog Archive » Brand New and Extremely Awesome jQuery Plugins

  42. Pingback: 60 jQuery Plugins You Should Try Today | 网络钻头

  43. Pingback: O futuro presente Jquery e CSS3 – Lista com os últimos lançamentos até 06/2012 | Desenvolvedor, Webdesigner e Pesquisador | deivison.com.br

  44. Pingback: 15 jQuery Plugins for Simple & Effective Forms User Interface | Blog for designers web developers bloggers freelancers SEO

  45. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Smashing Magazine

  46. Pingback: 9 Highly Useful Form & Validation jQuery Plugins | codeManiac - Snippets, Templates, API and the best developer content

  47. Pingback: 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag

  48. Pingback: 15 Simple & Effective jQuery Plugins that Enhance Your Forms

  49. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Wordpress Themes

  50. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | BoonJack Media || We make Multimedia easy.

  51. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design

  52. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Web Designer Bacolod City | Ricky Noel Diancin Jr. Webmaster | Wordpress Expert

  53. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Ruturaj Pradeep Kohok | Your Web Advisor

  54. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! : Rutweb Technology

  55. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Gold Coast Creative Agency | 24hr Design Quotes

  56. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Gold Coast Creative Agency | 24hr Design Quotes

  57. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Designer Brisbane blog

  58. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | e-wok.fr, le blog

  59. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win!

  60. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | DigitalMofo

  61. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! | Strona dla FIRMY

  62. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win! — Technology That

  63. Pingback: Smashing Email Newsletter Turns Two Years Old: Comment and Win!

  64. Pingback: Os 50 mais úteis plugins jQuery | Site para Empresas – Blog sobre Internet e Criação de Site

  65. Pingback: Smart Validate - jQuery Plugin to Make Credit Card Validation | Smashzine

  66. Pingback: Be a Professional Developer Using Ultimate jQuery Plugins | Passcomms Android

  67. Pingback: 40款非常有用的 jQuery 插件推荐(一) | 前端爱好者-崔超

  68. Pingback: Top ten best jQuery Plugins | TechnFuture Blog

  69. Pingback: Smart Validate: jQuery Credit Card Validation Plugin

  70. Pingback: The best 120+ Jquery plugins from around the internet

  71. Pingback: 30+ jQuery Plugins for Web Designers 2012 | Ulancer Blog

  72. Pingback: blog.aparajayah » Blog Archive » jQuery Credit-Card Validation Plugin

  73. Pingback: 9 Highly Useful Form & Validation jQuery Plugins | blogfreakz.com

  74. Pingback: jquery by uprod - Pearltrees

  75. Pingback: 10 jQuery Plugins That Enhance Your Forms | Ahmad Assaf`s Blog

  76. Pingback: 10 jQuery Plugins That Enhance Your Forms | AEXT.NET MAGAZINE

  77. Pingback: 28 Most Useful jQuery Plugins from 2011 | 1step web design: Best for developer and designer

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

    Reply
  79. Pingback: Brand New and Extremely Awesome jQuery Plugins | Webdesign artikelen

  80. Pingback: Top 50 JavaScript,jQuery Plugins and Tutorials From 2011

  81. Pingback: Most Useful jQuery Plugins from 2011 – Form & Validation | ChurchMag

  82. Pingback: 85 Best jQuery Plugin 2011 | Learn Web Design

  83. Pingback: 40款非常有用的 jQuery 插件推荐(系列一) – 峰随意动,尽从容!

  84. Pingback: Подборка полезных JQuery плагинов за 2011 год | TechnoVzor

  85. Pingback: Los 50 plugins jQuery más útiles de 2011 | loureyro.com.ar

  86. Pingback: Gerris » Smart Validate – jQuery Credit Card Format Validation

  87. Pingback: UK Web Design Now! » Post Topic » What’s new for designers, December 2011

  88. Pingback: What’s new for designers, December 2011 | Web Design

  89. Pingback: What’s new for designers, December 2011 | Best Web Magazine

  90. Pingback: What’s new for designers, December 2011 « HavaLink

  91. Pingback: What’s new for designers, December 2011 » We Love Brisbane – Website Design

  92. Pingback: What’s new for designers, December 2011 | linuxin.ro

  93. Pingback: The 50 Most Useful jQuery Plugins from 2011 | Typography Blog

  94. Pingback: Smart Validate - JQuery Credit Card Validation Plugin | Coderbay

  95. Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com

  96. Pingback: 40+ Useful and Fresh jQuery Plugins

  97. Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40+ Useful and Fresh jQuery Plugins

  98. Pingback: Top Wordpress jQuery Plugins-Nihad Nagi

  99. Pingback: Roundup of 25 Ovan Fresh jQuery plug-ins | Web Design Burn

  100. Pingback: 40 jQuery Eklentisi | M-Ozdemir.Com

  101. Pingback: disconnesso » Resources and links – 30 September 2011

  102. Pingback: Web Development articles, tutorials, help » Blog Archive » 40 New jQuery Plugins

  103. Pingback: 40 New jQuery Plugins

  104. Pingback: 21 Useful jQuery Plugins | designerbooster

  105. Pingback: Credit Card Validation using jQuery

  106. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines

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

  108. Pingback: Validazione carte di credito con un plugin jQuery | Wiki Future

  109. Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire

  110. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011

  111. Pingback: Validazione carte di credito con un plugin jQuery | Edit - Il blog di HTML.it

  112. Pingback: クレジットカードの入力チェックが出来るjQueryプラグイン「Smart Validate」 | Web活メモ帳

  113. Pingback: jQuery Credit Card Validation Plugin | BlogUpstairs

  114. Pingback: Qink | A Credit Card Validation jQuery Plugin

  115. Pingback: 50 new cool and crazy jQuery plugins

  116. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Cairns Web Design

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

    Reply

Leave a Reply

Required fields are marked *.


× eight = 56