Intelligent Card Brand Detector & Validator Tool

Description:

This intelligent card brand detection and validation system provides real-time credit card processing capabilities with advanced pattern recognition and validation algorithms. Built with vanilla JavaScript, it demonstrates complex regex pattern matching, real-time input formatting, and comprehensive validation logic for payment processing applications. Unlike basic card validators, this implementation features dynamic card type detection, real-time formatting based on card brand, and visual feedback systems to create a professional payment validation experience that enhances user trust and data accuracy. The application showcases advanced regex pattern libraries, real-time input masking, and dynamic UI updates - essential capabilities for building secure payment interfaces that provide immediate user feedback and prevent input errors.

The Challenge:

Most card validation tools are either too simplistic or lack real-time user feedback. I wanted to create an intelligent, responsive card validation system that provides instant brand detection, proper formatting, and clear validation feedback while maintaining security and user experience.

Development Story:

This project combined payment processing requirements with user experience design. The most complex aspect was implementing the comprehensive regex pattern system that accurately detects card brands from partial input while handling various formatting rules for different card types.

Key Challenge: Creating a real-time detection system that works with partial card numbers while providing accurate brand identification and proper formatting rules for each card type (AMEX vs standard formats).

Technologies Used:

• HTML5 - Accessible form structure with proper input validation attributes
• CSS3/SCSS - Dynamic visual feedback and responsive card display
• JavaScript (ES6+) - Real-time pattern matching and validation logic
• Regular Expressions - Comprehensive card brand detection patterns
• Input Masking - Real-time formatting and visual feedback systems

Technical Architecture:

• Pattern-Based Detection - Regex pattern matching for card brand identification
• Real-Time Processing - Immediate validation and formatting on every keystroke
• Dynamic Formatting - Card-type-specific formatting rules (AMEX vs standard)
• Visual Feedback System - Clear status indicators and validation messages

Technical Implementation:

• Brand Detection: Comprehensive regex patterns for major card brands
• Real-Time Formatting: Dynamic input masking based on detected card type
• Validation Logic: Length validation and format verification
• UI Synchronization: Real-time updates across all visual elements

Core Functionality:

• Real-time card brand detection from partial card numbers
• Dynamic formatting based on card type (AMEX 4-6-5, standard 4-4-4-4)
• Visual brand identification with card icon highlighting
• Real-time validation feedback with clear status messages

User Experience:

• Real-time visual feedback for card brand detection
• Dynamic formatting that adapts to different card types
• Clear validation messages with color-coded status indicators
• Smooth transitions and responsive card display

Technical Features:

• Comprehensive regex patterns for all major card brands
• Real-time input masking and formatting system
• Dynamic maxlength adjustment based on card type
• Visual card brand identification with SVG icons

How to Use:

• Start typing your credit card number in the input field
• Watch as the system automatically detects the card brand
• See real-time formatting applied based on the card type
• Receive immediate validation feedback as you type

Code Highlight:

// Intelligent card brand detection with comprehensive regex patterns
function creditCardValidator(creditCardValue) {
    const regexes = {
        jcb: /^(?:2131|1800|35)[0-9]{0,}$/,
        amex: /^3[47][0-9]{0,}$/,
        diners: /^3(?:0[0-59]{1}|[689])[0-9]{0,}$/,
        visa: /^4[0-9]{0,}$/,
        mastercard: /^(5[1-5]|222[1-9]|22[3-9]|2[3-6]|27[01]|2720)[0-9]{0,}$/,
        maestro: /^(5[06789]|6)[0-9]{0,}$/,
        discover: /^(6011|65|64[4-9]|62212[6-9]|6221[3-9]|622[2-8]|6229[01]|62292[0-5])[0-9]{0,}$/
    };

    creditCardValue = creditCardValue.replace(/\D/g, ''); // Remove non-digit characters
    return Object.keys(regexes).find(brand => creditCardValue.match(regexes[brand])) || "unknown";
}

// Dynamic formatting based on card type
if (brand === "amex") {
    // AMEX format: 4-6-5
    formattedValue = rawValue.replace(/^(\d{0,4})(\d{0,6})(\d{0,5}).*/, '$1 $2 $3').trim();
    cardInput.setAttribute("maxlength", "17"); // 15 digits + 2 spaces
} else {
    // Standard format: 4-4-4-4
    formattedValue = rawValue.replace(/(\d{4})(?=\d)/g, '$1 ').substr(0, 19); // 16 digits + 3 spaces
    cardInput.setAttribute("maxlength", "19"); // 16 digits + 3 spaces
}

Key Learnings:

• Mastered complex regex pattern design for card brand detection
• Improved understanding of payment processing requirements and security
• Learned to create real-time input formatting and validation systems
• Gained experience with dynamic UI updates and visual feedback systems

Future Enhancements:

• Luhn algorithm implementation for complete card validation
• Card expiration date and CVV validation integration
• Payment gateway API integration for actual processing
• Accessibility improvements for screen reader users

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Real-time card brand detection
• Support for multiple card types
• Luhn algorithm validation
• Dynamic card number formatting