Tapan kumar

Showing posts with label web design. Show all posts

Credit Card Validation Plugin in Jquery

Tuesday, June 24, 2014 2

Introduction

It's been a long time since my last post. In the last two months I was running through a hectic schedule, so could not publish anything here.

But this time I am here with my first ever JQuery Plugin and that's on Credit Card Validation.

While working with any payment gateway its an important thing to validate the correct credit card/debit card details. You may have developed an interface where the user has to give the credit card details like card no, cvv no, expiry date, name on the card. These fields need to be validated before processing towards the payment.

In order to validate the credit card details you may use the jquery or server side coding with the help of regex expressions, which is a time taking thing. So I thought of developing an efficient plugin which can create a nice looking interface along with the user friendly validations that can be consumed in any type of application. So here it is.

In this post we will see how this plugin works and how to use it in your application. You can download the plugin from the below link.

Download Source Code Here

Behind The Scene

Enter Card No.

Expiry Date (MM/YY)

CVV

Name on Card

**I have used bootstrap for design purpose, you can use it or not according to your project requirement.

Before entering into the plugin details lets know some basic things about the credit card number pattens.

The first digit in your credit-card number signifies the system:

    3 - travel/entertainment cards (such as American Express and Diners Club)
    4 - Visa
    5 - MasterCard
    6 - Discover Card

The structure of the card number varies by system. For example, American Express card numbers start with 37; Carte Blanche and Diners Club with 38.

American Express - Digits three and four are type and currency, digits five through 11 are the account number, digits 12 through 14 are the card number within the account and digit 15 is a check digit.

Visa - Digits two through six are the bank number, digits seven through 12 or seven through 15 are the account number and digit 13 or 16 is a check digit.

MasterCard - Digits two and three, two through four, two through five or two through six are the bank number (depending on whether digit two is a 1, 2, 3 or other). The digits after the bank number up through digit 15 are the account number, and digit 16 is a check digit.

(Courtesy: http://money.howstuffworks.com)

Lets get into the coding things. Ok first of all we will see the user interface and design it for enabling the user to provide his/her card details for validation and further proceedings.

I have used Bootstrap to get a UI like this, You can use it or else you can not according to your requirement.

This is how our UI is going to look like. Don't you guys like it ? please share your valuable comments below to modify it.

UI for CC Validation

Before we can start you need to download the plugin first. If you have not till now then download it from below.

Download Source Code

Once you download and extract it you will find the below javascript files in the js folder.

jquery-1.7.1.min.js
ccvalidate-tapan.min.js

We will be needing the ccvalidate-tapan.min.js file for our validation thing and you can add a latest JQuery to your project too.

In the css folder you will find the below css files

bootstrap.css
Validation.css

Ok, Now lets jump into the coding part. Here is the HTML page how it looks like.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/Validation.css" rel="stylesheet" />
    <script src="js/ccvalidate-tapan.min.js"></script>
    <script>
        $(document).ready(function () {
            // Initiate CC Validation
            InitiateValidation();

            // For check valid invalid details
            $("#btnValidate").click(function () {

                if (ValidateForm()) {
                    alert('You have entered valid details...');
                }
                else {
                    alert('You have entered invalid details/skipped some fields...');
                }
            });
        });

    </script>
</head>
<body>
    <div style="margin-top: 50px;" class="container">
        <div class="row">
            <div class="col-sm-5 col-xs-offset-3">
                <div class="well">

                    <div class="row">
                        <div class="col-sm-12">
                            <label class="col-sm-12 control-label">Enter Card No.</label>
                            <div class="col-sm-12">
                                <input placeholder="4587-7834-6735-1930" id="1" class="form-control" filtertype="CCNo">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <label class="col-sm-12 control-label">Expiry Date (MM/YY)</label>
                            <div class="col-sm-12">
                                <input placeholder="12/20" id="3" class="form-control" filtertype="Date">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="col-sm-12 control-label pull-right">CVV</label>
                            <div class="col-sm-12">
                                <input placeholder="454" id="3" class="form-control" filtertype="Number">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <label class="col-sm-12 control-label">Name on Card</label>
                            <div class="col-sm-12">
                                <input placeholder="Tapan kumar" id="1" class="form-control" filtertype="CharacterAndSpace">
                            </div>
                        </div>
                    </div><br />
                    <div class="row">
                        <div class="col-sm-12">
                            <button id="btnValidate" class="btn btn-info col-sm-3 col-sm-offset-4 control-label">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

If you look into the above code you will find that I am using an attribute named filtertype for the input fields, which is responsible for the validation.

Here is the attribute values I have used for validating your card details.

Credit Card No : filtertype = "CCNo"
Expiry Date : filtertype = "Date"
CVV No : filtertype = "Number"
Name on Card : filtertype = "CharacterAndSpace"

These attribute values are used into validate your card details and prevent user from inserting invalid entries in the input fields.

What you have to do is just to call 2 methods in JQuery in order to validate the card details. Find the script below.

    <script>
        $(document).ready(function () {
            // Initiate CC Validation
            InitiateValidation();

            // For check valid invalid details
            $("#btnValidate").click(function () {

                if (ValidateForm()) {
                    alert('You have entered valid details...');
                }
                else {
                    alert('You have entered invalid details/skipped some fields...');
                }
            });
        });

    </script>

The InitiateValidation() method initiates the validation, and ValidateForm() method will return a boolean if the form is valid or not and you can perform your task accordingly. Here I am showing some alert if the details are correct or not in the click event of the submit button.

That's all for your validation to work out.

Plugin Features :

while inserting the card no it will automatically put a "-" in between 4 digits.
It will not allow you put anything except numbers in the card input field.
It will show your card type at the right side of the text box.
Max length of the CCNo field is 19(including the "-").
In the Date field you wont be able to put anything except numbers and the field will not accept the first two digits greater than 12 as these two digits indicates the month.
Max length of the Expiry Date field is 6(including the "/").
Now the CVV no field will accept only 3 digits.
Finally the Name on Card field will accept a name, which should be at least of 3-4 characters.

Happy Coding...

URL Rewrite Using .htaccess File (Removing Page Extensions)

Monday, January 6, 2014 4

Tapan kumar |

Introduction

In one of my previous article I have explained how to rewrite your website URL in C#(.NET). Here I will show you a simple example of achieving this using the .htaccess file.

Behind The Scene

Very often you need to rewrite your website URL to make it search engine friendly. You may need to remove file extension from the pages.

Lets say you have a page named "services.aspx", If you look into the page then you might not get a proper idea what type of content your page is representing. Exactly the same way Search Engines also look in the pages and page names. So its very important to give a specific and user and/or SEO friendly URL names.

If we consider the above page then lets make it a bit user friendly by changing what it is representing actually. Lets change it to "seo-services-in-india.aspx", now you can see this name actually means something to users and/or Search Engines.

Another thing its a better to have pages with no extension, but you know its impossible to miss the file extension of a page (ie. .php, .html, .jsp, .aspx). So what you need you need to force the browser to render the "seo-services-in-india.aspx" under the name of "seo-services-in-india".

In my previous article on URL Rewriting, we have achieved the same goal by giving the dummy page name according to our choice that does not depend on the real page name.

e.g we have rewritten a URL from "contact.aspx" to "my-contect-details", where the page name actually changed from one to other programatically. But here we will not change it but we will remove the extension only.

 <IfModule mod_rewrite.c>
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteRule ^([^\.]+)$ $1.html [NC,L]
     RewriteRule ^([^\.]+)$ $1.aspx [NC,L]
     RewriteRule ^([^\.]+)$ $1.php [NC,L]
     RewriteRule ^([^\.]+)$ $1.jsp [NC,L]
 </IfModule>

Now put the above code into your .htaccess file, and this will remove all the .html extensions from all your pages automatically. and the pages can be rendered without a file extension of ".html", ".aspx", ".php", ".jsp"

Happy Coding...

Enforce Browser To Add WWW Before Your Website

Friday, October 18, 2013 5

Tapan kumar |

Introduction

Its very important in the eyes of Search Engine Optimization to render your website with a www in the beginning. If your site is being rendered with a www and also without a www then there is a big problem.

To overcome this issue lets find out a solution.

Behind The Scene

lets consider your website's name is "www.tapankumar.in" , So when you type www.tapankumar.in in the browser then it will open the site. Again if you type tapankumar.in in the browser then also it will open the site.

Now the problem is that when a search engine like Google try to crawl your site it will find TWO - 200 response against "www.tapankumar.in" and "tapankumar.in" , Hence the search engine consider this as a duplicate url.

You need to resolve this issue in order to get better SEO results, and here is a way to do this using your .htaccess file.

 <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{HTTP_HOST} !^www\.tapankumar\.in$ [NC]
     RewriteRule ^(.*)$ http://www.tapankumar.in/$1 [R=301,L]
  </IfModule>

Now put the above code into your .htaccess file, and this will prepend a "www" before your website address automatically.

Happy Coding...

How To Make Dynamic Versioning For CSS and JS Files

Tuesday, October 8, 2013 0

Tapan kumar |

Introduction

If you are developing a web application in HTML and CSS or any other technology, and you are using some external CSS or JS files, you might notice one thing that in some cases if you made any changes to your existing .css or .js files then the browsers are not reflecting the changes immediately.

What happens in that case is that the browser do not download a fresh copy of the latest version of the .css and .js files, instead it uses those files stored in your local cache. As a result the changes you made recently are not visible to you.

Behind The Scene

In this case if you want your results to be effective in your browser then you may need to refresh your browser or you may need to clear the cache of your browser so that it can download a fresh copy from the server. Or else there is a simple way to achieve this.

This is a very common problem in day to day codding life. Here is a simple way that explains how to fool around the browser and force it to download a fresh content of the .css or .js file.

Below is a stylesheet which has a source file "style.css" that end with a query string like thing "?v=1.1".

 <link rel="stylesheet" href="style.css?v=1.1">

The above case when you load the web page the browser will treat "style.css" as a different file along with "?v=1.1". Hence the browser is forced to download a fresh copy if the stylesheet or the script file.

Dynamically Add Version to the URL:

If you want to do this versioning in a dynamic way then you can achieve this by using the config file in asp.net.

Let's say you are using a single style.css file in multiple locations, then there will be a bit problem when you change something in the file and forget the locations where the file is being used. There you can not add the versioning query string manually.

In this case you need a dynamic way to do this and here I achieved this using the config file in asp.net.

Just add a key inside the appsettings of your config file as below.

 <appSettings>
    <add key="Version" value="1.1"/>
 </appSettings>

Now in the page where the .css or .js files are being used, append the below code to the "src" attribute.

 <script src="Scripts/ModalPopUp.js?v=<%= System.Configuration.ConfigurationManager.AppSettings["Version"] %>" type="text/javascript"></script>

This will automatically append the query string "v=1.1" to the "src" attribute of the link. And in future if you change anything in the .css or .js file then no need to find out all the locations to add versions, just change the version in the config file and your work is finished. You just make the browser fool to download a fresh copy.

Happy Coding...

How To Redirect Your Old Website To A New One Using Meta Tag

Monday, October 7, 2013 0

Tapan kumar |

Introduction

You can use .htaccess file for rewriting your web address. Or you may use any CMS to do this too. But there is a simple way to do so using the meta tag of your pages.

If you want to use the .htaccess file then please refer my last post with title How To Redirect A Website Using .htaccess File

Behind The Scene

If you are going to change the domain name of your website then you must need to redirect all the users to the new pages. The redirections process can be done by using .NET code behind functionalities or by using PHP.
You can do this by using the .htaccess file too. But here I got a very simple way to redirect your old web pages to the newly created ones in the new domain.

Now insert the below code to the header section of your web page.

     
 <meta http-equiv="refresh" content="0;url=http://tapankumar.in/index.html" />

The above meta tag will refresh the page with a delay of 0 sec and redirects to http://tapankumar.in/index.html page.

If you put "5" in place of "0" in the content element then the page will be refreshed and redirected after 5 sec.

You can put this code in each and every page of your old site and redirect all pages to the corresponding nes pages in the new domain.

Below is a full example on this.

     
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://tapankumar.in" />
<title>Page Moved</title>
</head>
<body>
This page has moved. Click <a href="http://www.tapankumar.in">here</a> to go to the new page.
</body>
</html>

The above command will redirect you to tapankumar.in after 2 seconds.

Hope this may help you.

Happy Coding...

How To Redirect A Website Using .htaccess File

Tapan kumar |

Introduction

.htaccess file is a small text document that generally presents in the same location of the default page of your site. Its a very powerful file unlike the config file, a small mistake can make your whole site down. So before doing any changes to the .htaccess
file you should be very careful.

There are various things you can do with the .htaccess file. Here I will explain some custom redirects using .htaccess file.

Behind The Scene

Using .htaccess we can acheive numerous custom redirections as below.

Redirect Permanently

301 (Permanent) Redirect: If you have shifted your website from one domain to another, and you want to divert all the requests to the older site to the new one then do it as below:

     
 # This allows you to redirect your entire website to any other domain
 Redirect 301 / http://www.tapankumar.in/

The above command will redirect you to www.tapankumar.in.

Redirect Temporarily

302 (Temporary) Redirect: Point an entire site to a different temporary URL. This is useful when you have a temporary landing page and plan to switch back to your main landing page at a later date:

     
 # This allows you to redirect your entire website to any other domain
 Redirect 302 / http://www.tapankumar.in/

Redirect To a Specific Sub-Folder

In case you want to redirect from your index.html page to another sub directory then you need the below command in your .htaccess file.

     
 # This allows you to redirect index.html to a specific subfolder
 Redirect /index.html http://www.tapankumar.in/newdirectory/

The above command will redirect you to www.tapankumar.in/newdirectory/.

Redirect To a Specific Page

In case you want to redirect from your index.html page to another page called home.html, then you need the below command in your .htaccess file.

     
# Redirect old file path to new file path
Redirect /olddirectory/index.html http://www.tapankumar.in/newdirectory/home.html

The above command will redirect you from olddirectory/index.html to newdirectory/home.html page.

Redirect To a Specific Index Page

You can set your default page of your site in the IIS server or in the apache server. but by using your .htaccess file you can set your default page by your own

     
# Provide Specific Index Page (Set the default handler)
DirectoryIndex index.html

The above command will set index.html page as your default page.

Once again I need to say, while working with .htaccess file be careful or else it will break your whole system.

Happy Coding...

A Journey from Unknown to Popular...

Add

Credit Card Validation Plugin in Jquery

Introduction

Behind The Scene

Plugin Features :

URL Rewrite Using .htaccess File (Removing Page Extensions)

Introduction

Behind The Scene

Enforce Browser To Add WWW Before Your Website

Introduction

Behind The Scene

How To Make Dynamic Versioning For CSS and JS Files

Introduction

Behind The Scene

How To Redirect Your Old Website To A New One Using Meta Tag

Introduction

Behind The Scene

How To Redirect A Website Using .htaccess File

Introduction

Behind The Scene

Redirect Permanently

Redirect Temporarily

Redirect To a Specific Sub-Folder

Redirect To a Specific Page

Redirect To a Specific Index Page

ABOUT ME

SEARCH

BLOG VIEWS

FACEBOOK

THROW ME AN EMAIL

FOLLOW ME

SEARCH CLOUD

POPULAR POSTS