Credit Card Validator using Bootstrap & JavaScript

Last Updated : 27 Feb, 2024

A credit card validator checks if a given number adheres to the format and algorithm of credit card numbers, typically ensuring it’s the correct length, and passes mathematical validation such as the Luhn algorithm, helping to verify its authenticity.

Prerequisites

Approach

This HTML file contains a credit card validation form. Users input credit card numbers, and JavaScript validates them. It ensures the input is 16 digits long, contains only numbers, and displays error messages for invalid inputs. Red text indicates errors, such as incorrect length or non-numeric characters. If the input is valid, it shows a green “Valid Credit Card Number” message. Bootstrap CSS styles the form, providing a clean and responsive layout. This setup creates a user-friendly experience for verifying credit card numbers, aiding in accurate data entry, and reducing errors during payment processing.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Validating Credit Card</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                          Validating Credit Card
                          </h2>
                        <div class="form-group">
                            <label for="creditCardInput">Enter
                                Credit Card:</label>
                            <input type="text" class="form-control"
                                   id="creditCardInput" maxlength="16">
                            <small id="errorMessage" class="form-text"></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <!-- Bootstrap JS and jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
    <script>
        document.getElementById('creditCardInput').addEventListener('input',
            function () {
            const creditCardInput = this.value;
            const errorMessage = document.getElementById('errorMessage');
            // Check if it's exactly 16 digits
            const isValidCreditCardFormat = /^\d{16}$/.test(creditCardInput);
            // Check if it contains only numbers
            const isValidCreditCardNumbersOnly = /^\d*$/.test(creditCardInput);
            // Check if it contains any alphabet characters
            const containsAlphabets = /[a-zA-Z]/.test(creditCardInput);
 
            if (!isValidCreditCardFormat) {
                errorMessage.textContent = 
                      'Enter a valid Credit Card Number (exactly 16 digits)';
                // Set color to red for error
                errorMessage.style.color = 'red';
            } else if (!isValidCreditCardNumbersOnly) {
                errorMessage.textContent = 'Only numbers are allowed';
                errorMessage.style.color = 'red';
            } else if (containsAlphabets) {
                errorMessage.textContent = 'Only numbers are allowed (no alphabets)';
                errorMessage.style.color = 'red'; r
            } else {
                errorMessage.textContent = 'Valid Credit Card Number';
                // Set color to green for success
                errorMessage.style.color = 'green';
            }
        });
    </script>
</body>
 
</html>