JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>
<body>
    <div class="container">
        <form class="form-horizontal" role="form" id="ProviderDetailsForm" method="post">
            <div class="form-group">
                <label class="col-sm-2 control-label labelfont">SSN:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" name="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="11" />
                </div>
                <label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" data-bind="value: ContactNumber" name="ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="13" />
                </div>
                <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
            </div>
            <div class="form-group">
                <button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
                <button type="reset" id="Reset" class="btn btn-primary col-sm-1">Reset</button>
            </div>
        </form>
    </div>
</body>

CSS

.error {
    font-size : 1em;
    color:Red;
}

JavaScript

$("#ProviderDetailsForm").validate({
     onfocusout: function (element, event) {
         this.element(element);
     },
     rules: {
         SSN: {
             required: true,
             minlength: 9,
             maxlength: 9,
             digits: true
         },
         ContactNumber: {
             required: true,
             minlength: 10,
             maxlength: 10,
             digits: true
         },
     },
     messages: {
         SSN: {
             required: "Please enter your SSN",
             minlength: "Invalid SSN(9 Digits atleast)",
             maxlength: "Invalid SSN(9 Digits only)"
         },

         ContactNumber: {
             required: "Please enter your Contact Number",
             minlength: "Enter a 10 digit contact number",
             maxlength: "Enter a 10 digit contact number"
         },
     }

 });

 var SSN_Tab_out = false;
 $("#SSN").blur(function () {
     if (!SSN_Tab_out && $(this).val().trim().length == 9) {
         var SSN = $("#SSN").val();
         $("#SSN").val(SSN.substring(0, 3) + "-" + SSN.substring(3, 5) + "-" + SSN.substring(5));
         self.SSN($("#SSN").val());
         SSN_Tab_out = true;
     }
 });

 $("#SSN").focusin(function () {
     self.SSN($("#SSN").val().replace(/-/g, ""));
     SSN_Tab_out = false;
 });

 var Contact_Tab_out = false;
 $("#ContactNumber").blur(function () {
     if (!Contact_Tab_out && $(this).val().trim().length == 10) {
         var ContactNum = $("#ContactNumber").val();
         $("#ContactNumber").val("(" + ContactNum.substring(0, 3) + ")" + ContactNum.substring(3, 6) + "-" + ContactNum.substring(6));
         self.ContactNumber($("#ContactNumber").val());
         Contact_Tab_out = true;
     }
 });

 $("#ContactNumber").focusin(function () {
     self.ContactNumber($("#ContactNumber").val().replace(/-/g, ""));
     self.ContactNumber($("#ContactNumber").val().replace('(', ""));
     self.ContactNumber($("#ContactNumber").val().replace(')', ""));
    ...