ssn validate & format

HTML

<div id="u22" class="ax_text_field">
    <input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11"/>
</div>

CSS

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.error-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.error-border:focus { 
    outline: none;
    border-color: #F00;
    box-shadow: 0 0 10px #F00;
}

JavaScript

// SSN validation
// trap keypress - only allow numbers
$('#u22_input').on('keypress', function(event){
    // trap keypress
      
});

// checks that an input string is an integer, with an optional +/- sign character
function isInteger (s) {
    if(s === '-') return true;
   var isInteger_re     = /^\s*(\+|-)?\d+\s*$/;
   return String(s).search (isInteger_re) != -1
}

// format SSN 
$('#u22_input').on('keyup', function(){
   var val = this.value.replace(/\D/g, '');
   var newVal = '';
    if(val.length > 4) {
        this.value = val;
    }
    if((val.length > 3) && (val.length < 6)) {
        newVal += val.substr(0, 3) + '-';
        val = val.substr(3);
    }
    if (val.length > 5) {
        newVal += val.substr(0, 3) + '-';
        newVal += val.substr(3, 2) + '-';
        val = val.substr(5);
    }
    newVal += val;
    this.value = newVal;   
});