Mask first 6 digits of Aadhar Card No

Getting error after enter number

Cannot set properties of null (setting 'value')

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AadhaarMasking.aspx.cs" Inherits="MyWebApp.AadhaarMasking" %>





    
    
    


    

        

            


                Aadhaar No
                    
                    
                
            
            

                
                

                

                With Mask :
                

                

                Without Mask :
                

            
        
    

Check the above full code. if you still not get the result then check your console that is there any error on your page. May be there is a conflict between js file.

Hi Garima,

Please refer below link

https://facingissuesonit.com/tag/jquery-to-mask-aadhar-number/

I tryed a lot but dont know where i am doing wrong

Can anyone please suggest me, exact where i am doing wrong

The complete code :

function hideCardValue(val) {
    document.getElementById("cardNoSafe").value = val;
    var len = val.length;
    if (len > 1) {
        const regex = /\d(?=\d{4})/g;
        const substr = "X";
        var maskedVal = val.replace(regex, substr);
        maskedVal = "XXXXXX" + maskedVal.slice(6); // Mask first 6 digits
        document.getElementById("txtadhaarno").value = maskedVal;
        var txtadhaarno = document.getElementById('txtadhaarno').value;
        var cardNoSafe = document.getElementById('cardNoSafe').value;

        // Show the hidden divs
        document.getElementById("dvCCN").style.display = "block";
        document.getElementById("dvRe").style.display = "block";

        // Set the values to the respective divs
        $('#dvCCN').html(txtadhaarno);
        $('#dvRe').html(cardNoSafe);

        console.log(txtadhaarno);
        console.log(cardNoSafe);
    }
} 

Try to add jQuery library in your HTML file if it is not added already, as the code is using it to set the HTML content of the div elements.

The value is not showing in the div because of their display property set to none. Add the below code before assign the value to the respective div.

document.getElementById("dvCCN").style.display = "block";
document.getElementById("dvRe").style.display = "block";

Updated code:

function hideCardValue(val) {
    document.getElementById("cardNoSafe").value = val;
    var len = val.length;
    if (len > 1) {
        const regex = /\d(?=\d{4})/g;
        const substr = "X";
        var maskedVal = val.replace(regex, substr);
        maskedVal = "XXXXXX" + maskedVal.slice(6); // Mask first 6 digits
        document.getElementById("txtadhaarno").value = maskedVal;
        var txtadhaarno = document.getElementById('txtadhaarno').value;
        var cardNoSafe = document.getElementById('cardNoSafe').value;

        document.getElementById("dvCCN").style.display = "block";
        document.getElementById("dvRe").style.display = "block";

        $('#dvCCN').html(txtadhaarno);
        $('#dvRe').html(cardNoSafe);

        console.log(txtadhaarno);
        console.log(cardNoSafe);
    }
}

Amit Mohanty

Tryed your code but not work

Try this

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

        console.log(txtadhaarno);
        console.log(cardNoSafe);
    }
}