jQuery

PAN Card Validation using jQuery

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

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

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

pan-card-validation-using-jquery

pan-card-validation-using-jquery

CSS

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

The following CSS classes are used.
PANNUM – It will used for convert the letters in to UPPER case.

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

<body>
    PAN Card:
    <input name="txtPANCard" type="text" id="txtPANCard" class="PANNUM" />
    <div id="divPanCard"></div>
    <hr />
    <input type="button" id="btnSubmit" value="Submit" />
</body>

Write this code for PAN Card Validation using jQuery

If the enter PAN card Number format is correct and length is ten then the success Message Div element is displayed in green color.

If the enter PAN card Number format is incorrect then the error Message Div element is displayed in red color.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            debugger;
            $('#btnSubmit').click(function () {
                debugger;
                var txtPANCard = $("#txtPANCard").val();
                var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
                if (txtPANCard.length == 10) {
                    if (txtPANCard.match(regex)) {
                        $("#divPanCard").css("color", "green");
                        $("#divPanCard").html("Valid Pan Number");
                    }
                    else {
                        $("#divPanCard").css("color", "red");
                        $("#divPanCard").html("Invalid Pan Number");
                    }
                    
                }
                else {
                    $("#divPanCard").css("color", "red");
                    $("#divPanCard").html("Eter valid PAN card Number");
                }
                
            });
        });

        debugger;
    </script>

Leave a Reply

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