JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
		<div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
    <input type="Submit" Value="Submit">
</form>

JavaScript

$('#phone').keyup(function() {
		jQuery.validator.addMethod("alphanumeric", function(value, element) {
			return this.optional(element) || /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/i.test(value);
		}, "Numbers and dashes only");
	});
  $('#salesforce_submit').validate({
		rules: {
			phone: {
				required: true,
				//digits: true,
				minlength: 10,
				alphanumeric: true		
			}
		},
		messages: {
			phone: {
				required: "Please enter your phone number",
				digits: "Please enter a valid phone number with only numbers",
				minlength: "Your number seems a bit short, doesn't it?"
			}
		},
		submitHandler: function(form) {
			event.preventDefault();
			var datastring = $('#salesforce_submit').serialize();
      return;
			$.ajax({
				url: '/php/quoteSend.php',
				type: 'POST',
				data: datastring
				,
				success: function(data) {
					console.log(data);
					if (data == 'Error!') {
						alert('Unable to submit form!');
					} else {
					}
				},
				error: function(xhr, textStatus, errorThrown) {
					alert(textStatus + '|' + errorThrown);
					console.log('error');
				}
			});
   }
})