JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<label>Policy Number: <input type="text" id="policyNum" maxlength="23"></label><span id="validation"></span>

<br><br>
        
<button type="button" id="nextBtn">Next</button>

CSS

#policyNum {width: 200px}

#validation {display: none;
    margin-left: 10px}

    #validation.invalid {display: inline-block;
        color: red}

JavaScript

var validationDiv = $('#validation'),
    invalidClass = 'invalid',
    shortPolicyPattern = [5, 5, 2],
    longPolicyPattern = [4, 4, 2, 2, 4, 2];

$('#policyNum').change(function(){
    var policyNumberInput = $(this),
        policyNumber = policyNumberInput.val().toUpperCase();
    
    if ( isCorrectLength(shortPolicyPattern, convertToShort(policyNumber)) ){
        setValid(validationDiv);
        policyNumberInput.val( formatPolicyNumber(shortPolicyPattern, convertToShort(policyNumber)) );
    } else if ( isCorrectLength(longPolicyPattern, convertToLong(policyNumber)) ) {
        setValid(validationDiv);
        policyNumberInput.val( formatPolicyNumber(longPolicyPattern, convertToLong(policyNumber)) );
    } else {
        setInvalid(validationDiv);
        if ( policyNumberInput.val() == "" ){
            validationDiv.html("Required");
        } else {
            validationDiv.html("Invalid Policy Number");
        }
    }
});

$('#nextBtn').click(function(event){
    event.preventDefault();
    if( !validationDiv.hasClass(invalidClass) ){
        alert('valid submit');
    }
});

function convertToShort(num){
    return num.replace(/[^0-9\s]/gi, '');
}

function convertToLong(num){
    return num.replace(/[^A-Z0-9\s]/gi, '');
}

function isCorrectLength(pattern, num){
    var totalCharsInPattern = 0;
    
    for( i=0; i<pattern.length; i++ ){
        totalCharsInPattern += pattern[i];
    }
    
    return num.length == totalCharsInPattern;
}

function formatPolicyNumber(pattern, num){
    var splitPolicyNum = [],
        currentIndex = 0;
    
    for( i=0; i<pattern.length; i++ ){
        splitPolicyNum.push( num.substr(currentIndex, pattern[i]) );
        currentIndex += pattern[i];
    }
    
    return splitPolicyNum.join("-");
}

function setValid(div){
    div.removeClass(invalidClass);
}

function setInvalid(div){
    div.addClass(invalidClass);
}