JS

PAN Card Number Validation using JavaScript

Here Laxmikant has explained with an example, PAN Card Number Validation using JavaScript.

The PAN Card Number entered in the input html TextBox will be validated on Button click using Regular Expression (Regex) in JavaScript.

In this blog I will explain with an example, how to implement Indian PAN Card Number validation using JavaScript.
The PAN Card Number entered in the given TextBox will be validated on Button click using Regular Expression (Regex) in JavaScript.

pan-card-number-validation-using-javascript

pan-card-number-validation-using-javascript

CSS

<style type="text/css">
        .PANNUM {
            text-transform: uppercase;
        }

        .error {
            color: Red;
            visibility: hidden;
        }
        .success{
            color:green;
            visibility:hidden;
        }
    </style>

The following CSS classes are used.
1. PANNUM – It will used for convert the letters in to UPPER case.
2. error – It will used for if user enter wrong pan number show error message in RED color.
3. success – It will apply green color for valid Pan card Number.

HTML
The given below HTML consists of TextBox, Button, and a Span.

<body>
    PAN Card:
    <input name="txtPANCard" type="text" id="txtPANCard" class="PANNUM" />
    <span id="lblPANCardError" class="error">Invalid PAN Number</span>
    <hr />
    <input type="button" id="btnSubmit" value="Submit" onclick="ValidatePAN()" />
    <br />
    <span id="lblPanCardSuccess" class="success">Valid Pan Number</span>

</body>

PAN Card Number Validation using JavaScript
When user is click on Submit button, the following JavaScript function “ValidatePAN()” is executed.

If the enter PAN card Number format is correct then the success Message SPAN element is displayed and error message SPAN Element is hide.

If the enter PAN card Number format is incorrect then the error Message SPAN element is displayed and success message SPAN Element is hide.

<script type="text/javascript">
        debugger;
        function ValidatePAN() {
            debugger;
            var txtPANCard = document.getElementById("txtPANCard");
            var lblPANCardError = document.getElementById("lblPANCardError")
            var lblPANCardSuccess = document.getElementById("lblPanCardSuccess")

            var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
            //value is tested using a Regular Expression.
            if (regex.test(txtPANCard.value.toUpperCase())) {
                //If the enter PAN card Number format is correct then the success Message SPAN element is displayed
                //and error message SPAN Element is hide.
                lblPanCardSuccess.style.visibility = "visible";
                lblPANCardError.style.visibility = "hidden";

                return true;
            }
            else {
                //If the enter PAN card Number format is incorrect then the Error Message
               //SPAN element is displayed.
               //and Success message SPAN Element is hide.

                lblPanCardSuccess.style.visibility = "hidden";
                lblPANCardError.style.visibility = "visible";

                return false;
            }
        }
    </script>

Leave a Reply

Your email address will not be published. Required fields are marked *