Конфликт, перестала работать валидация после кода ajax почему?

Question

[Skilful221]

конфликт валидации в модальном окне

$('body').on('click', 'button#reservation', function (event) {
    event.preventDefault();

    let data, form, checkin, checkout, adults, children, cottage, username, email, phone, comment;

    form = $(this).closest('form');
    checkin = form.find('#log_in').val();
    checkout = form.find('#come_out').val();
    adults = form.find('#field').val();
    children = form.find('#children').val();
    cottage = form.find('#my_select').val();
    username = form.find('#username').val();
    email = form.find('#email').val();
    phone = form.find('#phone').val();
    comment = form.find('#comment').val();

    data = {
        'checkin': checkin,
        'checkout': checkout,
        'adults': adults,
        'children': children,
        'cottage': cottage,
        'username': username,
        'email': email,
        'phone': phone,
        'comment': comment
    };

    $.ajax({
        type: 'POST',
        url: 'ajax/application',
        data: data,
        success: function (data) {
            if (!data) {
                alert('Произошла ошибка, попробуйте позже');
                form[0].reset();
            } else {
                alert('Данные отправлены, вам перезвонят');
                form[0].reset();
                $('#modal').removeClass('modal_active')
            }
        },
        error: function (data) {
            alert('Произошла ошибка, попробуйте позже');
            form[0].reset();
        },
    });
})

вставил вот этот код пошел конфликт, не пойму в чем дело, срабатывает через раз

код формы

<!-- Modal window -->
    <div class="modal" id="modal" >
      <div class="modal-block">
      <h1 class="modal__title">Бронирование номера</h1>
        <button class="modal-block__close" id="close">&times;</button>
        <form action="#" method="POST" id="modal-form">
          <div class="modal-block__data">
            <div class="modal-block__point">
              <label>заезд:</label>
              <input type="text" id="log_in" name="log_in" class="datepicker modal-block__point-img" placeholder="12.11.2019" required>
            </div>
            <div class="modal-block__point">
              <label>выезд:</label>
              <input type="text" id="come_out" name="come_out" class="datepicker modal-block__point-img" placeholder="13.11.2019" required>
            </div>
            <div class="modal-block__point">
              <label>Взрослые</label>
              <input type="number" id="field" name="field" class="modal__come-out come_out" placeholder="2" required min="1" max="12">
            </div>
            <div class="modal-block__point">
              <label>Дети</label>
              <input type="number" id="children" class="modal__come-out come_out" placeholder="0" min="1" required max="20">
            </div>
          </div>
          <div class="modal-block__place">

            <div class="form-group">
              <div class="form-group__house">
                <label for="my-select">Номер</label>
                <select id="my_select" name="my_select" class="custom-select" required>
                  <option class="custom-select__one" value="">-- Выберите домик --</option>
                  <option value="1">Дом «Охотника» пн-чт</option>
                  <option value="2">Дом «Охотника» пт-вс, праздничные дни</option>
                  <option value="3">Дом «Лесника с баней»</option>
                  <option value="4">Дом «Рыбака с баней»</option>
                  <option value="5">Аренда парной 3 часа</option>
                  <option value="6">Аренда парной 4 часа</option>
                  <option value="7">Аренда парной 5 часов</option>
                  <option value="8">1 этаж коттедж «Уютный»</option>
                  <option value="9">2 этаж коттедж «Уютный»</option>
                  <option value="10">1 этаж коттедж «Деревенский»</option>
                  <option value="11">2 этаж коттедж «Деревенский»</option>
                </select>
              </div>
            </div>

            <span class="modal-block__img"></span>
            
            <p class="modal-block__message">Введите ваши контактные данные. Наш менеджер свяжется с вами в ближайшее время и поможет вам выбрать или забронировать номер</p>
          
         
            </div>
            <div class="modal-block__person">
              <div class="modal-block__name">
                <label for="username">ваше имя</label>
                <input type="text" id="username" name="username" class="username modal-block__name-1" placeholder="ФИО" required minlength="2" maxlength="15">
              </div>
              <div class="modal-block__email">
                <label for="email">e-mail</label>
                <input type="email" placeholder="[e-mail]" name="email" id="email" class="email modal-block__email-1" required >
              </div>
              <div class="modal-block__phone">
                <label for="phone">телефон</label>
                <input type="tel" id="phone" name="phone" placeholder="+7" class="modal-block__phone-1 phone" required >
              </div>
              <div class="modal-block__comment">
                <label for="comment">комментарий</label>
                <textarea name="" id="comment" cols="30" rows="1" class="modal-block__comment" placeholder="Напишите свой комментарий"></textarea>
              </div>
            </div>
            <div class="modal-block__answer">
              <h1 class="modal-block__answer-title">Коттедж "Деревенский" 2 этаж</h1>
              <div class="modal-block__answer-date">
              <span>12.11.2019 - 13.11.2019</span><span>(количество ночей: 1)</span>
              </div>
              <div class="modal-block__answer-price"><span class="modal-block__answer-price_1">2 800</span><span>руб/сутки</span></div>
              <div class="modal-block__answer-summa">
              <span class="modal-block__answer-price_1">2 800</span><span>руб/весь период</span></div>
            </div>
            <p class="modal-block__text">Нажав на кнопку, я даю  <a href="#" class="agreement-button">согласие на обработку персональных данных</a></p>
            <button type="submit" class="modal-block__button">Отправить</button>
        </form>
      </div>
    </div>  
    <!-- /end Modal window -->

Comments

[Николай Чуприк]

Что в ответе сервера?

[Skilful221]

на сервере нет ошибок, валидация перестала работать
убирается блок скрипта валидация снова работает

Answer 1

[Exploding]

Все там нормально работает (хоть js и ужасен). Из плейсхолдеров убрать только надо цифры. Или значения начальные указать.
Эта "2" сбивает с толку. Думаешь, что это значение по-умолчанию, а это плейсхолдер мать его! Где вас учили такие плейсхолдеры делать...

<label>Взрослые</label>
              <input type="number" id="field" name="field" class="modal__come-out come_out" placeholder="2" required min="1" max="12">

После отправки формы вы её ресетите и как бы всё сначала.

spoiler

input type=date тоже существует:)

Comments

[Skilful221]

$(document).ready(function(){
  /* Главный слайдер */
  $('.owl-carousel').owlCarousel({
      dots: true,
      nav: false,
      loop: true,
      autoplay:true,
      autoplayTimeout:5000,
      items:1
  });
  /* Slick слайдер */
  $('.feedback').slick({
    dots: true,
    dotsClass: 'feedback-dots',
    infinite: true,
    arrows: false,
    autoplay:true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true
  });
  /* меню гамбургер */
  $('.mobile-menu').on('click', function(e) {
    e.preventDefault();
    $('.mobile-menu__btn').toggleClass('mobile-menu__active'),
    $('.nav__menu').toggleClass('nav__menu-active')
  });
  /* Закрытие гамбургер меню при нажатии на пункт меню */
  $('.nav__menu').on('click', function(){
    $('.nav__menu').removeClass('nav__menu-active'),
    $('.mobile-menu__btn').removeClass('mobile-menu__active')
  });
});

/* Модальные окна */
var button = $('.button_modal');
var modal = $('#modal');
var close = $('#close');
/* var modal_close = $('.modal'); */
var body = $('body')


button.on('click', function() {
  modal.addClass('modal_active');
  body.addClass('modal_active-hidden');
});
close.on('click', function() {
  modal.removeClass('modal_active');
  body.removeClass('modal_active-hidden');
});

/* Модальные окно на обработку персональных данных */
var submit = $('.agreement-button');
var agreement = $('#agreement');
var closes = $('.modal-block__close-2');

submit.on('click', function() {
  agreement.addClass('agreement_active');
});
closes.on('click', function() {
  agreement.removeClass('agreement_active');
});
/* подсветка страниц меню */
$(document).ready(function(){
 
  var url=document.location.href; $.each($('.nav__menu-place a'),function(){
   
    if(this.href==url){$(this).addClass('nav__active');};
   
    });
   
});

/* Скрипт Datapickera */
$(document).ready(function(){
  $( '.datepicker' ).datepicker({
      beforeShow: function (input, inst) {
          setTimeout(function () {
              inst.dpDiv.css({top: input.getBoundingClientRect().top + 40});
          }, 0);
      },
      dateFormat: 'dd.mm.yy'
  });
  $.datepicker.regional['ru'] = {
      closeText: 'Закрыть',
      prevText: 'Предыдущий',
      nextText: 'Следующий',
      currentText: 'Сегодня',
      monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
      monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
      dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
      dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
      dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
      weekHeader: 'Не',
      dateFormat: 'dd.mm.yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''
  };
  $.datepicker.setDefaults($.datepicker.regional['ru']);
});

$('body').on('change', 'select', function () {
    let data, form, checkin, checkout,  cottage;

    form = $(this).closest('form');
    checkin = form.find('#log_in').val();
    checkout = form.find('#come_out').val();
    cottage = form.find('#my_select').val();

    if (checkin == '' || checkout == '' || cottage == '') {
        alert('Введите корректные данные');
        form[0].reset();
    } else {
        data = {
            'checkin': checkin,
            'checkout': checkout,
            'cottage': cottage
        };

        $.ajax({
            type:'POST',
            url: 'ajax/advanced',
            data: data,
            success: function (data) {
                if (!data) {
                    alert('Введите корректные данные');
                    form[0].reset();
                } else {
                    $('.modal-block__answer').html(data);
                }
            },
            error: function (data) {
                alert('Произошла ошибка, попробуйте позже');
                form[0].reset();
            },
        });
    }
});

$('body').on('click', 'button#reservation', function (event) {
    event.preventDefault();

    let data, form, checkin, checkout, adults, children, cottage, username, email, phone, comment;

    form = $(this).closest('form');
    checkin = form.find('#log_in').val();
    checkout = form.find('#come_out').val();
    adults = form.find('#field').val();
    children = form.find('#children').val();
    cottage = form.find('#my_select').val();
    username = form.find('#username').val();
    email = form.find('#email').val();
    phone = form.find('#phone').val();
    comment = form.find('#comment').val();

    data = {
        'checkin': checkin,
        'checkout': checkout,
        'adults': adults,
        'children': children,
        'cottage': cottage,
        'username': username,
        'email': email,
        'phone': phone,
        'comment': comment
    };

    $.ajax({
        type: 'POST',
        url: 'ajax/application',
        data: data,
        success: function (data) {
            if (!data) {
                alert('Произошла ошибка, попробуйте позже');
                form[0].reset();
            } else {
                alert('Данные отправлены, вам перезвонят');
                form[0].reset();
                $('#modal').removeClass('modal_active')
            }
        },
        error: function (data) {
            alert('Произошла ошибка, попробуйте позже');
            form[0].reset();
        },
    });
})

чтобы понятнее было кидаю весь js код

[Exploding]

Skilful221,

чтобы понятнее было кидаю весь js код

Не очень понимаю зачем мне это...
Но из кода элементарно свернув узлы видно, что:

И есть что исправить.

Каким боком js к вашей валидации элементов формы то вообще?

[Skilful221]

Exploding, подскажите, пожалуйста, как сделать активной кнопку после тоuо, как будет заполнена форма

[Exploding]

Skilful221, Она у вас и так активна изначально. Не нужно лезть в это болото с js валидацией. Вам придется ловить и обрабатывать гору говна в виде событий input, blur, change, etc. Зачем эта боль? В любом случае всё что придет на обработчик - должно быть качественно перепроверено, по-этому особо жестко уделять время валидации на клиенте - высший бред и трата времени.
Есть же html 5 с валидацией форм (required атрибут). Всё очень удобно, поддержка псевдоклассов типа :valid, :invalid, :in-range и т.д. Всё делает браузер и позволяет вам почти все настроить как душа желает.
Зачем устраивать самобичевание?

У вас все работает как должно (в случае с формой). Плейсхолдер просто гребаный надо убрать. Он сбивает с толку и вам мерещится баг с кнопкой сабмита формы или с валидацией...
Ну или я может не понял сути вопроса тогда.