How to create adhaar validator using Html, css and javascript

Disclaimer: This blog post is for education purpose only. It only delivere the concept used behind Adhaar Validator. It doesn't demands or store any sensitive data. 
An Aadhaar Validator built using HTML and JavaScript applies the Verhoeff Algorithm to validate Aadhaar numbers. Here's an overview of its concept, working, and implementation details:

Concept

1. Aadhaar Number:

Aadhaar is a 12-digit unique identifier issued by the Government of India.

The last digit is a checksum digit calculated using the Verhoeff Algorithm.

2. Verhoeff Algorithm:

It is a checksum formula for error detection.
Uses a permutation table, multiplication table, and a dihedral group-based validation technique.

Helps detect common errors like single-digit errors and adjacent digit transpositions.

3. Goal:

Ensure the entered Aadhaar number is valid by:
Checking its length (12 digits).
Verifying the checksum using the Verhoeff Algorithm.

How It Works

1. HTML:

Provides a simple user interface for input and result display.

Contains an input field for the Aadhaar number and a button to trigger validation.

2. JavaScript:

Implements the Verhoeff Algorithm for checksum validation.

Steps:

Read the entered number.

Validate its length (should be 12 digits).

Apply the Verhoeff checksum formula.

Display whether the Aadhaar number is valid or invalid.

3. Output:

If the number is valid, show a success message.

If invalid, alert the user about the incorrect Aadhaar number.
Key Features

1. Validation Rules:

Checks if input is exactly 12 digits.

Ensures checksum validity using the Verhoeff algorithm.

2. Error Handling:

Provides clear feedback for invalid input (e.g., wrong length, non-numeric characters).

3. Lightweight and Efficient:

Runs directly in the browser without server-side dependencies.

Applications

1. Government Portals: To verify Aadhaar inputs during registration or authentication.

2. Web Forms: Integrate into webapps to ensure users provide valid Aadhaar numbers.

3. Learning Projects: Demonstrates checksum validation and algorithm implementation.
Adhar validator

Code Example

<!DOCTYPE html>
<html>
<head>
    <title>Aadhaar Number Validator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        label, input {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        button {
            display: inline-block;
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Aadhaar Number Validator</h2>
        <label for="aadhaar">Enter Aadhaar Number:</label>
        <input type="text" id="aadhaar" maxlength="12">
        <button onclick="validateAadhaar()">Validate</button>
        <div id="result" class="result"></div>
    </div>
    <script>
        // The multiplication table
        var d = [
            [0,1,2,3,4,5,6,7,8,9],
            [1,2,3,4,0,6,7,8,9,5],
            [2,3,4,0,1,7,8,9,5,6],
            [3,4,0,1,2,8,9,5,6,7],
            [4,0,1,2,3,9,5,6,7,8],
            [5,9,8,7,6,0,4,3,2,1],
            [6,5,9,8,7,1,0,4,3,2],
            [7,6,5,9,8,2,1,0,4,3],
            [8,7,6,5,9,3,2,1,0,4],
            [9,8,7,6,5,4,3,2,1,0]
        ];
        // The permutation table
        var p = [
            [0,1,2,3,4,5,6,7,8,9],
            [1,5,7,6,2,8,3,0,9,4],
            [5,8,0,3,7,9,6,1,4,2],
            [8,9,1,6,0,4,3,5,2,7],
            [9,4,5,3,1,2,6,8,7,0],
            [4,2,8,6,5,7,3,9,0,1],
            [2,7,9,3,8,0,6,4,1,5],
            [7,0,4,6,9,1,3,2,5,8]
        ];
        // The inverse table
        var inv = [0,4,3,2,1,5,6,7,8,9];
        function validateAadhaar() {
            var aadhaar = document.getElementById("aadhaar").value;
            var result = document.getElementById("result");
            if (aadhaar.length !== 12 || !/^\d+$/.test(aadhaar)) {
                result.textContent = "Invalid Aadhaar number. It must be a 12-digit number.";
                result.style.color = "red";
                return;
            }
            if (verhoeffValidate(aadhaar)) {
                result.textContent = "Valid Aadhaar number.";
                result.style.color = "green";
            } else {
                result.textContent = "Invalid Aadhaar number.";
                result.style.color = "red";
            }
        }
        function verhoeffValidate(number) {
            var c = 0;
            var invertedArray = number.split('').map(Number).reverse();
            for (var i = 0; i < invertedArray.length; i++) {
                c = d[c][p[i % 8][invertedArray[i]]];
            }
            return c === 0;
        }
    </script>
</body>
</html>

Explanation 

Here’s a detailed line-by-line explanation of the JavaScript part:

Multiplication Table (d)

var d = [
    [0,1,2,3,4,5,6,7,8,9],
    [1,2,3,4,0,6,7,8,9,5],
    [2,3,4,0,1,7,8,9,5,6],
    [3,4,0,1,2,8,9,5,6,7],
    [4,0,1,2,3,9,5,6,7,8],
    [5,9,8,7,6,0,4,3,2,1],
    [6,5,9,8,7,1,0,4,3,2],
    [7,6,5,9,8,2,1,0,4,3],
    [8,7,6,5,9,3,2,1,0,4],
    [9,8,7,6,5,4,3,2,1,0]
];

This is the multiplication table used in the Verhoeff Algorithm.

Each row represents the result of a multiplication based on the algorithm's rules.

For example, if c = 3 and the next digit of the Aadhaar number is 5, the result will be d[3][5] = 8.

Permutation Table (p)

var p = [
    [0,1,2,3,4,5,6,7,8,9],
    [1,5,7,6,2,8,3,0,9,4],
    [5,8,0,3,7,9,6,1,4,2],
    [8,9,1,6,0,4,3,5,2,7],
    [9,4,5,3,1,2,6,8,7,0],
    [4,2,8,6,5,7,3,9,0,1],
    [2,7,9,3,8,0,6,4,1,5],
    [7,0,4,6,9,1,3,2,5,8]
];

This is the permutation table, which rearranges digits based on their position.

Each row corresponds to a position in the number (i % 8 ensures the cycle repeats every 8 digits).

For example, the digit at position 2 is permuted using p[2][digit].

Inverse Table (inv)

var inv = [0,4,3,2,1,5,6,7,8,9];

This is the inverse table, which is used to verify if the checksum is correct.

For example, the inverse of 1 is 4, and inv[1] = 4.

Validation Function: 

validateAadhaar

function validateAadhaar() {
    var aadhaar = document.getElementById("aadhaar").value;
    var result = document.getElementById("result");

Line 1: The function is triggered when the "Validate" button is clicked.

Line 2: Gets the Aadhaar number entered in the input field.

Line 3: Selects the element where the validation result will be displayed.
if (aadhaar.length !== 12 || !/^\d+$/.test(aadhaar)) {
        result.textContent = "Invalid Aadhaar number. It must be a 12-digit number.";
        result.style.color = "red";
        return;
    }
Line 1: Checks if: The Aadhaar number has exactly 12 digits.

It contains only numeric characters using a regular expression (/^\d+$/).

Line 2: If invalid, displays an error message in red.

Line 3: Stops further execution by returning from the function.
if (verhoeffValidate(aadhaar)) {
        result.textContent = "Valid Aadhaar number.";
        result.style.color = "green";
    } else {
        result.textContent = "Invalid Aadhaar number.";
        result.style.color = "red";
    }
}
Line 1: Calls the verhoeffValidate function to check the Aadhaar number.

Line 2-3: If valid, displays a success message in green.

Line 4-5: If invalid, displays an error message in red.

Checksum Validation Function: verhoeffValidate

function verhoeffValidate(number) {
    var c = 0;
    var invertedArray = number.split('').map(Number).reverse();

Line 1: Initializes the checksum value (c) to 0.

Line 2: Splits the Aadhaar number into an array of digits (split('')).

Converts each character to a number (map(Number)).

Reverses the order of digits (reverse()), as the Verhoeff algorithm processes digits from right to left.
for (var i = 0; i < invertedArray.length; i++) {
        c = d[c][p[i % 8][invertedArray[i]]];
    }
Iterates through each digit in the reversed Aadhaar number:

i % 8: Ensures the permutation table repeats cyclically every 8 digits.

p[i % 8][invertedArray[i]]: Finds the permuted value for the current digit.

d[c][...]: Updates the checksum (c) using the multiplication table and the permuted value.

return c === 0;
}

If the final checksum value (c) is 0, the Aadhaar number is valid.

Returns true if valid, otherwise false.

How It Works

1. User enters the Aadhaar number and clicks "Validate."

2. The input is checked for length and format.

3. The Verhoeff algorithm is applied:

Each digit is permuted based on its position.

The checksum is calculated using the multiplication table.

4. If the checksum is 0, the Aadhaar number is valid; otherwise, it is invalid.

Post a Comment

Previous Post Next Post

Ad01

Ad02