Credit Card Data Format Validation Using jQuery In Asp.Net

This article will show you how you can validate the credit card data format detail entered by user using jQuery in asp.net.

Some of my previous articles are as follows: Enable and Disable Asp.Net FileUpload Control Using jQuery, How to Enable or Disable Requiredfieldvalidator in Asp.Net Using jQuery, Dynamically Display Images From Folder By Ajax Using jQuery In Asp.net ,C#, Assign Client Side Click Event To Button Control Using jQuery In Asp.Net, Enable Or Disable All GridView Button On Check Of CheckBox Using jQuery, Ajax GridView Shorting Without Page Refresh Using jQuery In Asp.net and C#.Net, Enable Or Disable GridView Button By Row CheckBox Using jQuery In Asp.Net, jQuery Top Right ToolTip On Hyper Link With Question Mark Sign On Mouse Cursor In Asp.net.

So for this first we will download the below mention link jquery library.

https://github.com/stripe/jquery.payment/blob/master/lib/jquery.payment.js

Now we will create a new asp.net application and add the below library reference into the page header.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>     <script src="JS/jquery.payment.min.js"></script>

Now add the below tag into the page body.

<form id="form1" runat="server" novalidate autocomplete="on" method="POST">         <div class="container">             <div class="form-group">                 Card Number[<span class="cc-brand"></span>]                 <asp:TextBox ID="txtccnumber" runat="server" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required></asp:TextBox>             </div>             <div class="form-group">                 Expiry Date                 <asp:TextBox ID="txtccexp" runat="server" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required></asp:TextBox>             </div>             <div class="form-group">                 CVC No                 <asp:TextBox ID="txtcccvc" runat="server" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required></asp:TextBox>             </div>             <button type="submit" class="btn btn-lg btn-primary">Submit</button>             <h2 class="validation"></h2>         </div>     </form>

Now we will see the jQuery code which will validate the card data format.

jQuery(function ($) {             $('#<%=txtccnumber.ClientID%>').payment('formatCardNumber');             $('#<%=txtccexp.ClientID%>').payment('formatCardExpiry');             $('#<%=txtcccvc.ClientID%>').payment('formatCardCVC');             $.fn.toggleInputError = function (erred) {                 this.parent('.form-group').toggleClass('has-error', erred);                 return this;             };             $('form').submit(function (e) {                 e.preventDefault();                 var cardType = $.payment.cardType($('.cc-number').val());                 $('#<%=txtccnumber.ClientID%>').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));                 $('#<%=txtccexp.ClientID%>').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));                 $('#<%=txtcccvc.ClientID%>').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));                 $('.cc-brand').text(cardType);                 $('.validation').removeClass('text-danger text-success');                 $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');             });         });

In above code I have used control id to validate the entered value into the controls. And if user have not entered valid card detail it will show error.  It will also show the card type on the bases of the entered cared detail. Show here is the complete code of the page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication7.WebForm4" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>Credit Card Data Format Validation Using jQuery In Asp.Net</title>     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>     <script src="JS/jquery.payment.min.js"></script>     <style type="text/css" media="screen">         .has-error input {             border-width: 2px;         }         .validation.text-danger:after {             content: 'Validation failed';         }         .validation.text-success:after {             content: 'Validation passed';         }     </style>     <script>         jQuery(function ($) {             $('#<%=txtccnumber.ClientID%>').payment('formatCardNumber');             $('#<%=txtccexp.ClientID%>').payment('formatCardExpiry');             $('#<%=txtcccvc.ClientID%>').payment('formatCardCVC');             $.fn.toggleInputError = function (erred) {                 this.parent('.form-group').toggleClass('has-error', erred);                 return this;             };             $('form').submit(function (e) {                 e.preventDefault();                 var cardType = $.payment.cardType($('.cc-number').val());                 $('#<%=txtccnumber.ClientID%>').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));                 $('#<%=txtccexp.ClientID%>').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));                 $('#<%=txtcccvc.ClientID%>').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));                 $('.cc-brand').text(cardType);                 $('.validation').removeClass('text-danger text-success');                 $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');             });         });   </script> </head> <body>     <form id="form1" runat="server" novalidate autocomplete="on" method="POST">         <div class="container">             <div class="form-group">                 Card Number[<span class="cc-brand"></span>]                 <asp:TextBox ID="txtccnumber" runat="server" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required></asp:TextBox>             </div>             <div class="form-group">                 Expiry Date                 <asp:TextBox ID="txtccexp" runat="server" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required></asp:TextBox>             </div>             <div class="form-group">                 CVC No                 <asp:TextBox ID="txtcccvc" runat="server" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required></asp:TextBox>             </div>             <button type="submit" class="btn btn-lg btn-primary">Submit</button>             <h2 class="validation"></h2>         </div>     </form> </body> </html>

Now we have done run the application to check the output. First we will take some dummy credit card detail to validate the record 

 

Now we will use the above dummy credit card to validate the data.

DOWNLOAD