JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<form method="post" class="callback__mainform validate-class">
  <input type="text" class="form-check" name="name" id="call-name" placeholder="Имя">
  <input type="tel" class="form-check" name="phone" id="call-phone" placeholder="Телефон">
  <input type="email" class="form-check" name="email" placeholder="E-mail" required="">
  <div class="fast-buy__policy">
    <label class="polisy_label" for="fast-buy__policy_input2">
      Я согласен с <a href="#">«Политика конфиденциальности»</a>
      <img src="/local/templates/s-webs/img/popupYes.svg" alt="">
    </label>
    <input type="checkbox" checked="" id="fast-buy__policy_input2">
  </div>
  <div class="changeBtn-wrapper">
    <input type="submit" value="Отправить" class="changeBtn popup-feedback-btn sbm-btn">
    <img src="/local/templates/s-webs/img/contactsSubmit.svg" alt="">
  </div>
</form>

CSS

.validate-border {
  border-color: red !important;
}

JavaScript

function validateForm(selector) {
      var fName = $('form input[name="name"]'),
        fTel = $('form input[name="phone"]'),
        feMail = $('form input[name="email"]'),
        fRadio = $('.fast-buy__policy .polisy_label'),
        fSubmit = $('.sbm-btn'),
        attrDisT = {
          'disabled': true
        },
        attrDisF = {
          'disabled': false
        },
        vClass = 'validate-border',
        vSbm = 'sbm-dis'
      fInp = $('.form-check'),
        /* pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i; */

        $(selector).on('click', 'input[type="submit"]', function() {
          if ($(this).parents('form').find('input').hasClass('.form-check[type="email"]')) {
            if (feMail.val().length > 0 &&
              (feMail.match(/.+?\@.+/g) || []).length !== 1) {
              fSubmit.prop(attrDisT).addClass(vSbm);
              feMail.addClass(vClass);
              alert('введено верное мыло');
            } else {
              feMail.removeClass(vClass);
              alert('введено неверное мыло');
            }
          }

          if ($(this).closest('form').find('input.form-check[name="name"]')) {
            if (fName.val().length <= 3) {
              fSubmit.prop(attrDisT).addClass(vSbm);
              fName.addClass(vClass);
            } else {
              fName.removeClass(vClass);
            }
          }

          if ($(this).closest('form').find('input.form-check[type="tel"]')) {
            if (fTel.val().length <= 9) {
              fSubmit.attr(attrDisT).addClass(vSbm);
              fTel.addClass(vClass);
            } else {
              fTel.removeClass(vClass);
            }
          }

          if ($(this).closest('form').find('polisy_label input[type="checkbox"]')) {
            if (fRadio.hasClass('not-agree')) {
              fSubmit.attr(attrDisT).addClass(vSbm);
            }
          }
        });

      $(selector).on('mouseenter', 'input[type="submit"]', function() {
    ...