JSFiddle - React, Tailwind, and code Playground

by Julia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<form>
  <label>
    <input type="text" class="js-phone" name="ph" placeholder="Номер телефона" data-rule-required="true" data-rule-minlength="10" data-msg="Введите номер телефона">
  </label>
  
  <form action="mail.php" method="post" id="form">
     
   <h3>Заказать консультацию</h3>

      <div class="form-group">
          <label for="formName">
             <input type="text" class="form-control" id="formName" placeholder="ваше имя" required="">
            </label>
       </div>
       
       <div class="form-group">
            <label for="formName">
                   <input type="tel" class="form-control" id="formPhone" placeholder="ваш телефон" required="">
               </label>
        </div>

        <div class="form-group">
             <label for="formName">
                 <input type="email" class="form-control" id="formEmail" placeholder="ваш e-mail" required="">
               </label>
          </div>
  
  <input type="submit" value="Отправить">
</form>

CSS

label {
  display: block;
  margin: 10px 0;
}

.error {
  color: red;
}

JavaScript

jQuery.validator.addMethod("checkMask", function(value, element) {
    return /\+\d{1}\(\d{3}\)\d{3}-\d{4}/g.test(value); 
});

$('form').validate({
  rules: {
    ph: {
      checkMask: true
    }
  },
  messages: {
    ph: {
      checkMask: "Введите полный номер телефона"
    }
  }
});
$('.js-phone').mask("+7(999)999-9999", {autoclear: false});