Mask Aadhar Number On Page


What is Aadhaar?

Aadhaar is a verifiable 12-digit identification number issued by UIDAI (“Authority”) to the resident of India for free of cost after satisfying the verification process laid down by the Authority.
Any individual, irrespective of age and gender, who is a resident of India, may voluntarily enrol to obtain Aadhaar number based on demographic and biometric information.

What is Masked Aadhaar?

Aadhar number is very senstive information by which we can track an individual complete information thats why UIDAI provide both the options for down load Aadhar card.

1) Regular Aadhar Card : All digits visible
2) Masked Aadhar Card : Replacing of first 8 digits of Aadhaar number with some characters like “xxxx-xxxx” while only last 4 digits of the Aadhaar Number are visible.

How to Mask Aadhaar in your web page?

Making aadhar number Replacing of first 8 digits of Aadhaar number with some characters like “xxxx-xxxx” while only last 4 digits of the Aadhaar Number are visible. In web page
aadhar number text box when user click/focus or hover on text box will display regular aadahr number otherwise will display as masked.

See Also :

Mask Aadhar Number Example

how to mask aadhar number on web page masked aadhar number on page

HTML Changes

Create a text box on your page with below html.

Aadhar Number: 

Java Script/JQuery Changes

Copy below java script in your head section of page.


var originalVal;
$(document).ready(function()
{
       if($('#txtAadhar').val().length>0)
		 {
		 if($('#txtAadhar').val().indexOf("X")==-1)
			{
			  originalVal=$('#txtAadhar').val();
			}
		    maskAadhar(this);
		 }

	    $('#txtAadhar').blur( function(e)
		{
	    	if($('#txtAadhar').val().indexOf("X")==-1)
	    	{
	    	  originalVal=$('#txtAadhar').val();
	    	}
	    	 maskAadhar(this);
		});

		$('#txtAadhar').focus( function(e)
		{
			$(this).val(originalVal);
		});
});
function maskAadhar(regularAadhar)
{
	 var varlen =$(regularAadhar).val().length;
	 if(varlen > 12)
	 {
	 $("#error").text('Not Valid Aadhar Number.');
	 }
	 else
	 {
	 $("#error").text('');
	 var str = $(regularAadhar).val();

	 var mask = varlen > 0 ? varlen > 1 ? varlen > 2 ? varlen > 3 ? varlen > 4 ? varlen > 5  ? varlen > 6 ? varlen > 7 ?
	        'XXXX XXXX'
          : 'XXXX XXX'
          : 'XXXX XX'
          : 'XXXX X'
          : 'XXXX'
		  : 'XXX'
		  : 'XX'
		  : 'X'
          : '';
          if (varlen < 9) {
          $(regularAadhar).val(mask);
          } else {
          $(regularAadhar).val(mask +' '+ $(regularAadhar).val().substring(8));
          }
   }
}

Download Source code

To download the source code of this example, click on below given download link.

Mask Aadhar Card

Drop me your questions in comments section.

References

https://www.uidai.gov.in/my-aadhaar/about-your-aadhaar.html
https://www.uidai.gov.in/283-faqs/aadhaar-online-services/e-aadhaar/1887-what-is-masked-aadhaar.html

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s