JSFiddle - React, Tailwind, and code Playground

by Francisco Maria Calisto

HTML

<h1>Phone field scrubbing utility</h1>

<ul>
    <li>Enter any content (characters, puntuation, etc.)</li>
    <li>As long as there are 10 digits it will validate true</li>
    <li>Providing the first digit is not 0 or 1</li>
    <li>And providing there is not 1 digit repeated 10 times</li>
    <li>The &quot;format it&quot; button will do just that</li>
    <li>The &quot;submit it&quot; button will strip out everything but digits</li>
</ul>

<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input type="button" id="format" value="format it">
<input type="button" id="submit" value="submit it">

CSS

body{
  font-family: Arial, sans-serif;
  margin: 25px;
}
input{
    font-size: xx-large; 
    border: 2px solid #555;
    margin: 10px;
    padding: 10px;
}
.on{
    border: 2px dashed #555;
/*  background: rgba(255, 215, 0,.15);
    color: rgb(255, 215, 0);*/
}
.goodClass{
    /*border: 1px solid rgb(0, 255, 0);*/
    background: rgba(0, 255, 0, .15);
    color: rgb(0, 255, 0);
}
.badClass{
    /*border: 1px solid rgb(255, 0, 0);*/
    background: rgba(255, 0, 0,.15);
    color: rgb(255, 0, 0);
}

JavaScript

$(function(){
    $('#phone1').phoneScrubber({
            focusClass: 'on',
            goodClass: 'goodClass',
            badClass: 'badClass',
            testOnKeyup: true
    });
  
    $.fn.phoneScrubber.formatAll();

    $('#format').click(function(){
        $.fn.phoneScrubber.formatAll();
    });

    $('#submit').click(function(){
        if($.fn.phoneScrubber.validateAll()){
            $.fn.phoneScrubber.submitAll();
        }
    });
});

(function($) {
    $.fn.phoneScrubber = function(opts) {

        var
        obj = this,
            defaults = {
                    phoneCleaner    : /\D/g 
                    , repeated      : /(.)\1{9,}/g
                    , minLen        : 10
                    , omit          : [0, 1]
                    , format        : '() -'
                    , focusClass    : null
                    , testOnKeyup   : true
                    , goodClass     : null
                    , badClass      : null
                    , formatOnBlur  : false
            }, settings = $.extend({}, defaults, opts)
                    , testStr
                    , aFormat   = settings.format.split('')
                    , pre1      = aFormat[0]
                    , pre2      = aFormat[1] + aFormat[2]
                    , sep       = aFormat[3]
                    , message   = ''
                    , part1     = ''
                    , part2     = ''
                    , part3     = ''
                    , returnVal = ''
                    , setVal
                    , test
                    , cleanIt
                    , formatNumber
                    , cleanNumber
                    , errCount  = 0
                    , errs      = []
                    ;

        return this.each(function() {

            test = function(dirty) {
                var test        = dirty.replace(settings.phoneCleaner,'')
                    , testLen   = test.length
                    , startChar =...