JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<form id="phone">
  
       
           
           
                
                    

               
                <input class="form-control phone" name="phone" aria-label="..." placeholder="Your phone number" type="text" /> 
                  <button class="btn btn-default" type="submit">SUBMIT</button>
                  <div style="margin-top:30px;">
    Is this a valid phone number? <span class="hide yes">Yes</span> <span class="hide no">No</span>
</div>

           
        
    
</form>

CSS

.hide{
    display:none;
}
.yes{
    color: green;
}
.no {
    color: red;
}

JavaScript

$(document).ready(function () {

   
    $('.phone').on('input', function (event) {
        this.value = this.value.replace(/[^0-9]/g, '');
    });

    $("#phone").validate({
        errorPlacement: function (error, element) {
            error.insertAfter($(element).parent('div'));
        },
        rules: {
            phone: {
                required: true,
            }
        },
        
        submitHandler: function (form) {
            alert('/textMessage/' + $('input[name="phone"]').val());
           
            return false;
        }
    });

});