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="tel" id="call-phone" placeholder="Телефон">
  <div class="changeBtn-wrapper">
    <input type="submit" value="Отправить" class="changeBtn popup-feedback-btn sbm-btn">
    <img src="<?=SITE_TEMPLATE_PATH?>/img/contactsSubmit.svg" alt="">
  </div>
</form>

CSS

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

JavaScript

var fName = $('form input[name="name"]'),
            fTel = $('form input[type="tel"]'),
            feMail = $('form input[name="email"]'),
            fRadio = $('.fast-buy__policy input'),
            fSubmit = $('.sbm-btn'),
            attrDis = {
              'disabled': 'disabled'
            },
            vClass = 'validate-border';
        $(".sbm-btn").hover(function() {
          

          

          // if (fTel.val().length <= 10) {
          //     fSubmit.attr(attrDis);
          //     fTel.addClass(vClass);
          // } else {
          //     fSubmit.remvoveAttr(attrDis);
          //     fTel.remvoveClass(vClass);
          // }

          // if (fRadio.is('checked', false)) {
          //     fSubmit.attr(attrDis);
          // } else {
          //     fSubmit.remvoveAttr(attrDis);
          // }


        }, function() {
          // отвели курсор с объекта (не учитываются переходы внутри элемента)
          // alert('not ok')
        });
        
        // #1 вариант (события не всплывают)
$(".obj1")
.mouseenter(function() {
	// навели курсор на объект (не учитываются переходы внутри элемента)	
	if (fName.val().length <= 3) {
            fSubmit.remvoveAttr(attrDis);
            fName.remvoveClass('validate-border');
          } else {
            fSubmit.attr(attrDis);
            fName.addClass(vClass);
          }
})
.mouseleave(function(){ 		
	// отвели курсор с объекта (не учитываются переходы внутри элемента)
  $('#log').append('[#1] - mouseleave<br/>');
});