0

$(document).ready(function () {
  const hotelSlider = new Swiper(".hotel-slider", {
    keyboard: {
      enabled: true,
      onlyInViewport: false,
    },
    // Optional parameters
    loop: true,

    // Navigation arrows
    navigation: {
      nextEl: ".hotel-slider__button--next",
      prevEl: ".hotel-slider__button--prev",
    },
    effect: "coverflow",
  });
  const reviewsSlider = new Swiper(".reviews-slider", {
    // keyboard: {
    // enabled: true,
    // onlyInViewport: false,
    // },
    // Optional parameters
    loop: false,

    // Navigation arrows
    navigation: {
      nextEl: ".reviews-slider__button--next",
      prevEl: ".reviews-slider__button--prev",
    },
  });
  
   $(".modal__form").validation();


  var menuButton = document.querySelector(".menu-button");
  menuButton.addEventListener("click", function () {
    console.log("Click on menu");
    document
      .querySelector(".navbar-bottom")
      .classList.toggle("navbar-bottom__visible");
  });

  var modalButton = $("[data-toggle=modal]");
  var closeModalButton = $(".modal__close");
  modalButton.on("click", openModal);
  closeModalButton.on("click", closeModal);
  $(document).on("keydown", function (event) {
    if (event.key == "Escape") {
      closeModal(event);
    }
  });

  function openModal() {
    var modaOverlay = $(".modal__overlay");
    var modaDialog = $(".modal__dialog");
    modaOverlay.addClass("modal__overlay_visible");
    modaDialog.addClass("modal__dialog_visible");
  }
  function closeModal(event) {
    event.preventDefault();
    var modaOverlay = $(".modal__overlay");
    var modaDialog = $(".modal__dialog");
    modaOverlay.removeClass("modal__overlay_visible");
    modaDialog.removeClass("modal__dialog_visible");
  }
});
<div class="modal">
      <div class="modal__overlay"></div>
      <!-- /.modal__overlay -->
      <div class="modal__dialog">
        <a href="" class="modal__close">
          <img src="img/close.svg" alt="Icon: close" />
        </a>
        <h3 class="modal__title modal__title--mb-3">Booking</h3>
        <form action="send.php" method="POST" class="modal__form">
          <input
            type="text"
            class="input modal__input"
            placeholder="Your Full Name*"
            name="name"
          />
          <input
            type="text"
            class="input modal__input"
            placeholder="Phone Number*"
            name="phone"
          />
          <input
            type="text"
            class="input modal__input"
            placeholder="Your email*"
            name="email"
          />
          <textarea
            class="message modal__message"
            placeholder="Message"
            name="message"
          ></textarea>
          <button class="button modal__button" type="submit">Send</button>
          <span class="modal__info">* Required Fields</span>
        </form>
      </div>
      <!-- /.modal__dialog -->
    </div>
    <!-- /.modal -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/main.js"></script>

2

1 ответ 1

0

Например:

$(".modal__form").validate({
  // внутри находится объект с правилами валидации
  messages: {
    user_name: {
      required: "Пожалуйста, заполните это поле",
      minlength: "Имя не менее 2 символов",
    },

    user_phone: {
      required: "Пожалуйста, заполните это поле",
      minlength: "Телефон не менее 11 символов",
    },
  }
});

Так же для <input>. Минимальное допустимое количество символов для ввода minlength="2". Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер required.

2
  • 1
    Спасибо понял свои ошибки Проблема состоит в том еще, что если я вставляю код с валидацией в самом начале ( перед кодом с слайдером) то весь скрипт перестаёт работать 26 мар 2022 в 7:08
  • 1
    Спасибо, разобрался в своей ошибке 26 мар 2022 в 7:19

Ваш ответ

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

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