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.
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
About the Author
0 comments:
Please let me know your view