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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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