0

Есть сайт, на нем не могу закончить валидацию, она в приницпе готова, но почему-то не всегда срабатывает валидация с первого раза, т.е нажимаю на поле календаря - он вылазиет, я выбираю дату, она появляется в форме, но когда нажимаю отправить валидация формы кричит красным нет, как будто не видит что форма заполнена, иногда это срабатывает, иногда нет. В console есть ошибка связанная с slick слайдером, не знаю как ее исправить и связано ли это с общей проблемой.тут видно что число выбрано ссылкана сайт, нужно нажать "забронировать" откроется модальное окно с этой формой

Код этой страницы очень большой больше тысячи строк, не знаю как его сюда загрузить, приложу фрагменты - думаю css не нужно

    $(document).ready(function(){
  $("#modal-form").validate({
    lang: 'ru',
    rules: {
      username: {
        required: true,
        minlength: 2,
        maxlength: 15
      },
      phone: {
        required: true
      },
      email: {
        required: true
      },
      field: {
        required: true,
        digits: true,
        minlength: 0,
        maxlength: 2
      },
      log_in: {
        required: true,
        date: true
      },
      come_out: {
        required: true,
        date: true
      },
      my_select: { 
        required: true
      }
    },
      errorElement: "em",
      errorClass: "modal-invalid",
      messages: {
        username: {
          required: "Введите имя",
          minlength: jQuery.validator.format("Введите еще {0} символов")
        },
        phone: {
          required: "Укажите телефон",
          phone: "Введите телефон"
        },
        email: {
          required: "Укажите email",
          email: "Введите корректный адрес"
        },
        field: {
          required: "Сколько человек?"
        },
        log_in: {
          required: "Выберите дату",
          date: "Укажите дату"
        },
        come_out: {
          required: "Выберите дату",
          date: "Укажите дату"
        },
        my_select: { 
          required: "Выберите дом"
        }  
      },

  });
  /* Маска для телефона */
  $(".phone").mask("+7 (999) 999-99-99");
});
/* Скрипт 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']);
});


 <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">
            </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">
            </div>
            <div class="modal-block__point">
              <label>Взрослые</label>
              <input type="text" id="field" name="field" class="modal__come-out come_out" data-msg-maxlength="Стольких мест нет" placeholder="2">
            </div>
            <div class="modal-block__point">
              <label>Дети</label>
              <input type="text" class="modal__come-out come_out" placeholder="0">
            </div>
</div>

2 ответа 2

0

Для начала нужно избавиться от ошибки в консоли. Для этого в файле main.js удаляем инициализацию слайдера slick (12-21 строки включительно), т.к. я посмотрел у вас на сайте вообще он не подключен, а подключена карусель owl. Далее main.js в шаблоне подключаем в самом конце (после подключения(инициализации) всех скриптов), перед закрывающим body порядок расположения подключения скриптов должен быть таким:

<script src="js/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.formstyler.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
<script src="js/main.js"></script> <!-- Вот наш main.js в самом конце! -->

3
  • Slick слайдер используется на главной странице, его я удалить не могу, что касается перемещения main.js в конец списка - сделал, нопроблема не ушла(
    – Andrey S
    19 дек 2019 в 13:19
  • Для начала нужно просто его отключить чтобы проверить, в этом ли проблема заключается. Для отправки формы на сервер, что используете? 19 дек 2019 в 13:26
  • ошибка пропала, если его убрать, но это не помогло с валидацией, она также по прежнему срабатывает не с первого раза log_in: { required: true, date: true }, come_out: { required: true, date: true }, мне кажется корень зла вот тут, наверное нужно добавить какое-то значение для проверки формы на наличие в ней символов, типо minlenght
    – Andrey S
    19 дек 2019 в 13:56
0

Да, проблема была в date: true, я ее убрал и все стало нормально работать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.