Introduction :
Oracle APEX simplifies web app development, while JavaScript adds real-time interactivity. Together, they offer a powerful solution for capturing and validating Aadhaar numbers—India’s unique 12-digit ID.
Why we need to do:
Capturing valid Aadhaar numbers is critical for compliance and user verification. Without proper controls, users may enter incorrect data or face frustrating errors.It ensure accurate 12-digit numeric input.It Provide real-time validation and feedback.It Improve user experience and reduce errors
How do we solve:
Step 1 : Create new page and create one page item Aathar number and keep it as a text field.
Step 2 : Open the properties of the text field and set a Static ID (e.g., aadhaar_input).
Step 3 : In the Page Designer, go to the JavaScript section under the page properties.Add the following code to implement input masking and validation
document.addEventListener(‘DOMContentLoaded’, function () {
const aadhaarInput = document.getElementById(‘aadhaar_input’);
aadhaarInput.addEventListener(‘input’, function () {
this.value = this.value.replace(/[^0-9]/g, ”).slice(0, 12); // Restrict to 12 digits
});
aadhaarInput.addEventListener(‘blur’, function () {
if (this.value.length !== 12) {
alert(‘Please enter a valid 12-digit Aadhaar number.’);
this.focus();
}
});
});
Step 4 : Go to the CSS section in Page Designer. Add the following styles
#aadhaar_input {
border: 2px solid #4caf50; /* Green border for valid input */
border-radius: 5px;
padding: 10px;
font-size: 16px;
}
#aadhaar_input:focus {
outline: none;
border-color: #2196f3; /* Blue border on focus */
box-shadow: 0 0 5px #2196f3;
}
Step 5 : In Page Designer, go to the Validations section.Create a new Validation for the Aadhaar field using a PL/SQL Expression
LENGTH(:P1_AADHAAR) = 12 AND REGEXP_LIKE(:P1_AADHAAR, ‘^\d{12}$’)
Step 6 : Save the changes and run the page.
Output:
Conclusion:
Combining Oracle APEX and JavaScript provides a powerful solution for capturing Aadhaar numbers accurately and efficiently. This approach ensures data integrity, improves user experience with real-time validation, and reduces errors. By implementing this solution, you create a user-friendly and robust application that meets compliance needs while enhancing usability.
