CODEWITHSUNDEEP
javascriptregex
colbreez
colbreez

Reputation: 23

How to validate SSN using regular expressions

I have most of my code done for it but for some reason, it is just submitting my form without doing anything. I'm trying to validate an SSN whether they enter it without or with dashes. As well as validating it I want to change the color of the words and background of input if it is invalid. I have my class names and IDs set up correctly and in my CSS I'm using things like input.invalid, label.invalid etc for color changes. here is what I have for my JS code. Any help would be great, thank you!

    window.onload = function () {

document.forms[0].onsubmit = validForm;

    }

 function validForm () {

var allTags = document.forms[0].getElementsByTagName("*");

for(vari = 0; i < allTags.length; i++) {
    
    validTag(allTags[i]);
    
}

return false;

function validTag(thisTag) {
    
    var outClass = "";
    
    var allClasses = thisTag.className.split(" ");
    
    for(var j = 0; j < allClasses.length; j++) {
        
        outClass += validBasedOnClass(allClasses[j]) + " ";
        
    }
    
    thisTag.className = outClass;
    
    if(outClass.indexOf("invalid") > -1) {
       
        invalidLabel(thisTag.parentNode);
        
        thisTag.focus();
        
        if(thisTag.nodeName == "INPUT") {
           
           thisTag.select();
           
        }
       
    }
    
    function validBasedOnClass(thisClass) {
        
        var classBack = "";
        
        switch(thisClass) {
                
            case "":
                
            case "invalid":
                break;
                
            case "Social":
                
                if(!validSocial(thisTag.value)) {
                   
                    document.getElementById("socialNum").className = ("invalid");
                    
                    document.getElementById("ssn").className = ("invalid");
                    
                   classBack = "invalid ";
                   
            }
                break;
                
            default:
                
                classBack += thisClass;
                
        }
        
        return classBack;
        
    }
    
    function validSocial(social) {
        
        var re = /^\d{3}-?\d{2}-?\d{4}$/;
        
        var socialArray = re.test(social);
        
        if(socialArray) {
            
            document.getElementById("socialNum").value = socialArray[1] + "-" + socialArray[2] + "-" + socialArray[3];
            
            return true;
           
        }
        
        return false;
        
    }
    
    function invalidLabel(parentTag) {
        
        if(parentTag.nodeName == "LABEL") {
           
            parentTag.className += "invalid";
           
           }
        
    }
    
}

}

here is my HTML code as requested

    <!DOCTYPE html>
COP2831: Chapter 7 - Regular Expressions

Regular Expressions - Kevin Taylor

Enter Social Security Number:

  

Upvotes: 1

Views: 9090

Answers (1)

wp78de
wp78de

Reputation: 18980

Since your sample is not complete and I do not really get why you do it this way I just give a simplified working sample of your SSN validation.

window.onload = function () {
    document.forms[0].onsubmit = validForm;
};
function validForm() {
    var ssnTag = document.getElementById("socialNum");
    var re = /^\d{3}-?\d{2}-?\d{4}$/;
    var valid = re.test(ssnTag.value);
    if (valid) {
        ssnTag.style.borderColor = "green";
    } else {
        ssnTag.style.borderColor = "red";
    }
    return false;
}

JSFiddle

Upvotes: 2

Related Questions