Как сделать, чтобы после выбора даты не было странного эффекта кнопки?

Question

на пару милисекунд она становится disabled

это из-за того что на 61 строке $(input).on('blur')

$(document).ready(function() {

  const $datepicker = $('.js-datepicker');

  if ($datepicker.length > 0) {
    let datepicker = $datepicker.datepicker({
      autoClose: true,
      position: 'bottom right',
      onSelect: function(formattedDate, date, inst) {
        /*if(date) {
          alert(date);
        }*/
      }
    }).data('datepicker');
  }


  var regName = /^[a-zA-Zа-яА-ЯёЁIi]+/;
  var regAll = /.{1,}/;
  
    // для проверки при нажатии


  function valClick(input, length, regExp, phone) {
    var value = '';
      value = $(input).val();

    regExp = regExp == '' ? /./ : regExp;

    if (phone === true) {
      bool_reg = regExp.test(value);
    } else {
      bool_reg = !regExp.test(value);
    }

    if (value.length < length || value === '' || bool_reg) {
      $(input).addClass('form-fail');
    }
  }

    //  деакцивация кнопки при нажатии


  function disBtnClick(input, btn) {
    var input = $(input);

    if (input.hasClass('form-fail')) {
      $(btn).attr('disabled', 'disabled');
      return false;
    } else {
      return true;
    }

  }



  function validate(input, length, regExp, phone) {

  var value = '';
    $(input).on('blur', function(e) {

        value = $(this).val();
    
      var that = $(this);
      regExp = regExp == '' ? /./ : regExp;

      if (phone === true) {
        bool_reg = !regExp.test(value);
      } else {
        bool_reg = regExp.test(value);
      }

      if (value.length > length && value !== '' && bool_reg) {
        that.removeClass('form-fail').addClass('form-done');
      } else {
        that.removeClass('form-done').addClass('form-fail');
      }
    });

 }

  // деакцивация кнопки если есть поле с ошибкой


  function disBtn(input, btn, bool) {
    var input = $(input);
    input.on('blur', function() {
      if (input.hasClass('form-fail')) {
        $(btn).attr('disabled', 'disabled');
      } else {
        $(btn).removeAttr('disabled');
      }

    });

    $('.select__wrap').on('click', '.select__item', function(e) {
      $('.user__hidden').removeClass('form-fail').addClass('form-done');
      if ($('.form-fail').length>0) {
        $(btn).attr('disabled', 'disabled');
      } else {
        $(btn).removeAttr('disabled');
      }
    })

  }

  validate('#u_name', 1, regName);
  validate('#u_surname', 1, regName);
  validate('#datepicker', 0, regAll);
  ///validate('#user__elem', 0, regAll);
  disBtn('#u_name, #u_surname, #datepicker', '.user__btn');

  function sendform() {
    valClick('#u_name', 1, regName);
    valClick('#u_surname', 1, regName);
    valClick('#datepicker', 0, regAll);
    valClick('#user__elem', 0, regAll);
    disBtnClick('#u_name, #u_surname, #datepicker', '.user__btn');

    return false;
  }

  $('.user__btn').on('click', function() {
    sendform();
  });





});

.user {
    background-color: #dbae2e;
    padding-top: 25px;
    padding-bottom: 55px;
}

.user__holder {
    display: flex;
    align-items: flex-end;
}

.user__wrap {
    width: calc(100% - 492px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-right: 110px;
    grid-gap: 110px;
}

.user__item:last-child {
    display: flex;
    flex-direction: column;
}

.user__box:not(:last-child) {
    margin-bottom: 20px;
}

.user__label {
    display: inline-block;
    cursor: pointer;
    font-size: 43px;
    color: #080400;
    letter-spacing: 0.02px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: "Toyota";
}

.user__input {
    display: block;
    width: 100%;
    min-height: 110px;
    font-size: 40px;
    border: 2px solid transparent;
    border-radius: 10px;
    outline: none;
    padding: 12px 20px;
}

.user__input.form-fail {
    border-color: #b00;
}

.user__btn {
    cursor: pointer;
    display: block;
    min-height: 110px;
    width: 492px;
    font-size: 43px;
    line-height: 1;
    background-color: #593d91;
    color: #dbae2e;
    border: none;
    border-radius: 10px;
    outline: none;
    text-transform: uppercase;
    padding: 12px 5px;
    font-weight: 600;
    font-family: "Toyota";
}

.user__btn[disabled] {
    cursor: default;
    opacity: 0.5;
}

.user__btn:not(:disabled):hover {
    cursor: pointer;
}

.user__hidden {
    display: none;
}

.user__hidden.form-fail + .select__wrap .select__placeholder {
    border-color: #b00;
}

.datepicker {
    width: 350px;
}

.datepicker--cell {
    transition: 0.25s background-color, 0.25s color;
}

.datepicker--day-name {
    color: #dbae2e;
}

.datepicker--cell.-current- {
    color: #593d91;
}

.datepicker--cell.-selected- {
    background: #593d91;
}

.datepicker--cell.-selected-:hover {
    background-color: #593d91;
}

.js-datepicker {
    position: relative;
    background-image: url(../img/icons/decor_arrow.png);
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 73px;
}

.js-datepicker:after {
    position: absolute;
    content: ' ';
    width: 352px;
    height: 235px;
    top: 0px;
    right: 0px;
}

.form-fail {
    border: 2px solid #b00;
}

@media screen and (max-width: 1700px) {

.user__wrap {
    grid-gap: 65px;
    padding-right: 70px;
}

}

@media screen and (max-width: 1430px) {

.user__wrap {
    width: calc(100% - 300px);
    grid-gap: 40px;
    padding-right: 40px;
}

.user__label {
    font-size: 33px;
}

.user__input {
    min-height: 94px;
    font-size: 30px;
}

.user__btn {
    min-height: 94px;
    width: 300px;
    font-size: 27px;
}

}

@media screen and (max-width: 1023px) {

.user__wrap {
    width: calc(100% - 240px);
    grid-gap: 20px;
    padding-right: 20px;
}

.user__label {
    font-size: 27px;
}

.user__input {
    min-height: 64px;
    font-size: 20px;
}

.user__btn {
    min-height: 64px;
    width: 240px;
    font-size: 20px;
    padding: 22px 5px;
}

.js-datepicker {
    background-size: 45px;
}

}

.select__wrap {
    position: relative;
    z-index: 4;
    width: 100%;
}

.select__wrap .select__placeholder {
    min-height: 110px;
    border-radius: 10px;
    border: 2px solid #fff;
}

.select__wrap .select__list {
    border-radius: 0 0 10px 10px;
}

.select__wrap.select__wrap--active .select__placeholder {
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid #080400;
}

.select__wrap.select__wrap--position-top.select__wrap--active .select__placeholder {
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #080400;
    border-bottom: none;
}

.select__wrap.select__wrap--position-top .select__list {
    border-radius: 10px 10px 0 0;
}

.select__wrap--active:after {
    top: calc(50% - 1px);
    transform: rotate(135deg);
}

.select__wrap--active .select__list {
    opacity: 1;
    visibility: visible;
    user-select: auto;
    max-height: 250px;
    transition: max-height 0.2s ease-out;
}

.select__wrap--start-active .select__list {
    overflow-y: hidden;
    max-height: 0px;
}

.select__wrap--end-active .select__list {
    overflow-y: auto;
}

.select__wrap--position-top .select__list {
    top: initial;
    bottom: 100%;
}

.select__wrap--disabled:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.select__placeholder {
    display: flex;
    align-items: center;
    background-image: url(../img/icons/decor_arrow.png);
    background-repeat: no-repeat;
    background-size: 73px;
    background-position: right 18px center;
    font-size: 30px;
    line-height: 1;
    color: #363636;
    background-color: #fff;
    padding: 12px 20px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-family: Toyota;
    font-weight: normal;
}

.select__placeholder.select__item--loader:before {
    right: 40px;
}

.select__placeholder.form-fail {
    border: 1px solid #b00;
}

.select__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: visibility 0.3s, opacity 0.3s;
    user-select: none;
}

.select__item,
.select__item-search,
.select__item-search-not-found {
    font-size: 30px;
    line-height: 1;
    color: #363636;
    padding: 15px 20px;
}

.select__item:hover,
.select__item-search:hover,
.select__item-search-not-found:hover {
    background-color: #593d91;
    color: #fff;
}

.select__item {
    display: block;
    user-select: none;
    cursor: pointer;
    transition: 0.3s background-color, 0.3s color;
}

.select__item--active {
    background-color: #593d91;
    color: #fff;
}

.select__item--disabled {
    text-decoration: line-through;
    background-color: #dddddd;
    color: #a3a3a3;
    user-select: none;
}

.select__item--disabled:hover {
    background-color: #dddddd;
}

@media screen and (max-width: 1430px) {

.select__wrap .select__placeholder {
    min-height: 94px;
}

}

@media screen and (max-width: 1023px) {

.select__wrap .select__placeholder {
    min-height: 64px;
}

.select__placeholder {
    font-size: 22px;
    background-size: 45px;
}

.select__item,
.select__item-search,
.select__item-search-not-found {
    font-size: 22px;
}

}



*{
  box-sizing: border-box;
}

*:after,
*:before {
   box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
    <section class="user">
        <div class="container">
            <form class="user__holder">
                <div class="user__wrap">
                    <div class="user__item">
                        <div class="user__box">
                            <label for="u_name" class="user__label">Имя</label>
                            <input id="u_name" type="text" class="user__input">
                        </div>
                        <div class="user__box">
                            <label for="u_surname" class="user__label">Фамилия</label>
                            <input id="u_surname" type="text" class="user__input">
                        </div>
                    </div>
                    <div class="user__item">
                        <div class="user__box">
                            <label for="" class="user__label">Дата</label>
                            <input readonly type="text" class="js-datepicker user__input" id="datepicker"/>
                        </div>
                        <div class="user__box user__box--time">
                            <label for="" class="user__label">Начало</label>
                            <input type="text" id="user__elem" class="user__hidden">
                            <div class="select__wrap">
                                <div class="select__placeholder" id="select_placeholder"></div>
                                <ul class="select__list">
                                    <li class="select__item">10-00</li>
                                    <li class="select__item">10-30</li>
                                    <li class="select__item">11-00</li>
                                    <li class="select__item">11-30</li>
                                    <li class="select__item">12-30</li>
                                    <li class="select__item">13-00</li>
                                    <li class="select__item">13-30</li>
                                    <li class="select__item">14-00</li>
                                    <li class="select__item">14-30</li>
                                    <li class="select__item">14-30</li>
                                    <li class="select__item">14-00</li>
                                    <li class="select__item">15-00</li>
                                    <li class="select__item">15-30</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="user__btn">Добавить учасн</button>
            </form>
        </div>
    </section>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>

БЛОГ НА HUSL

Как сделать, чтобы после выбора даты не было странного эффекта кнопки?

Ответы (0 шт):