In this article I will explain with an example, how to implement Indian PAN Card Number validation using Regular Expression (Regex) in JavaScript.
The PAN Card Number entered in the TextBox will be validated on Button click using Regular Expression (Regex) in JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox, SPAN and a Button.
PAN Card:
<input name="txtPANCard" type="text" id="txtPANCard" class="PAN" />
<span id="lblPANCard" class="error">Invalid PAN Number</span>
<hr />
<input type="button" id="btnSubmit" value="Submit" onclick="ValidatePAN()" />
 
 
Validating PAN Card Number using Regular Expression in JavaScript
When the Button is clicked, the following JavaScript function is executed.
First, the PAN Card Number TextBox is referenced and then its value is tested using a Regular Expression.
If the PAN Number format is incorrect then the Error Message SPAN element is displayed.
<script type="text/javascript">
    function ValidatePAN() {
        var txtPANCard = document.getElementById("txtPANCard");
        var lblPANCard = document.getElementById("lblPANCard")
        var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
        if (regex.test(txtPANCard.value.toUpperCase())) {
            lblPANCard.style.visibility = "hidden";
            return true;
        } else {
            lblPANCard.style.visibility = "visible";
            return false;
        }
    }
</script>
 
 
CSS Class
The following CSS classes are used.
1. PAN – It will force the letters to be UPPER case.
2. error – It will apply RED color to the error message.
<style type="text/css">
    .PAN
    {
        text-transform: uppercase;
    }
    .error
    {
        color: Red;
        visibility: hidden;
    }
</style>
 
 
Screenshot
Invalid PAN Card Number
PAN Card Number validation using JavaScript and Regular Expression
 
Valid PAN Card Number
PAN Card Number validation using JavaScript and Regular Expression
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code