connectseekers.com

Thursday, 16 June 2016

Credit Card Data Format Validation Using jQuery In Asp.Net

6/16/2016 - By Pranav Singh 0

This article will show you how you can validate the credit card data format detail entered by user using jQuery 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 


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


DOWNLOAD

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top