Garima Bansal

Garima Bansal

  • 1.1k
  • 680
  • 39.7k

Mask first 6 digits of Aadhar Card No

Apr 27 2023 9:49 AM

Hi

How to Mask first 6 digits as X when entering Aadhar Card No using jquery 

I am using regex pattern to mask,below code

<div class="row">
                                <div class="col-md-4">

                                    <span class="form-control border-0">Aadhaar No
                                    <asp:RequiredFieldValidator Text="*" runat="server" ControlToValidate="txtadhaarno" CssClass="text-danger" ErrorMessage="Adhaar is Required" ValidationGroup="BasicDetails" />
                                        <asp:RegularExpressionValidator Text="*" runat="server" ControlToValidate="txtadhaarno" CssClass="text-danger"
                                            ErrorMessage="Enter Valid Adhaar number" ValidationExpression="[\d]{12}" ValidationGroup="BasicDetails" />
                                    </span>
                                </div>
                                <div class="col-md-8">
                                    <asp:TextBox ID="txtadhaarno" runat="server" CssClass="form-control" onfocus="showCardValue()" onblur="hideCardValue(this.value)" MaxLength="12" autocomplete="off"
                                        type="text"></asp:TextBox>
                                    <input name="cardNoSafe" id="cardNoSafe" value="" style="display:none;"><br />
                                    <br />
                                    With Mask : 
                                    <div id="dvCCN" style="display:none;"></div>
                                    <br />
                                    Without Mask :
                                    <div id="dvRe" style="display:none;"></div>
                                </div>

                            </div>

 

<script type="text/javascript">
        function showCardValue() {
            document.getElementById("txtadhaarno").value = document.getElementById("cardNoSafe").value;
        }

        function hideCardValue(val) {
            document.getElementById("cardNoSafe").value = val;
            var len = val.length;
            if (len > 1) {
                const regex = /\d(?=\d{4})/g;
                const substr = "x";
                document.getElementById("txtadhaarno").value = val.replace(regex, substr);
                var txtadhaarno = document.getElementById('txtadhaarno').value;
                var cardNoSafe = document.getElementById('cardNoSafe').value;
                $('#dvCCN').html(txtadhaarno);
                $('#dvRe').html(cardNoSafe);

                console.log(txtadhaarno);
                console.log(cardNoSafe);
            }
        }
    </script>
if anyone know the solution kindly suggest me


Answers (8)