0

Не работает этот код:

formWriteUs.addEventListener('submit', function(evt) {
  if (!loginWriteUs.value || !emailWriteUs.value) {
    evt.preventDefault();
    console.log("Нужно ввести имя и мейл!");
  }
});

Не понимаю почему(

// Открытие модального окна "Напишите нам"
var buttonWriteUs = document.querySelector(".js-button-write-us");
var modalWriteUs = document.querySelector(".js-modal-write-us");
var buttonCloseWriteUs = modalWriteUs.querySelector(".modal-close");
var formWriteUs = modalWriteUs.querySelector("form");
var loginWriteUs = modalWriteUs.querySelector("#name-surname");
var emailWriteUs = modalWriteUs.querySelector("#email");

buttonWriteUs.addEventListener('click', function(evt) {
  evt.preventDefault();
  modalWriteUs.classList.add('js-modal__show');
  loginWriteUs.focus();
});

buttonCloseWriteUs.addEventListener('click', function(evt) {
  evt.preventDefault();
  modalWriteUs.classList.remove('js-modal__show');
});

formWriteUs.addEventListener('submit', function(evt) {
  if (!loginWriteUs.value || !emailWriteUs.value) {
    evt.preventDefault();
    console.log("Нужно ввести имя и мейл!");
  }
});
<div class="modal-wrapper js-modal-write-us">
  <section class="modal modal-write-us">
    <h2 class="visually-hidden">Напишите нам...</h2>
    <form class="form-write-us" action="https://echo.htmlacademy.ru" method="post">
      <p class="form-write-us__item name-field">
        <label for="name-surname">Ваше имя:</label>
        <input type="text" name="name-surname" id="name-surname" placeholder="Имя Фамилия" required>
      </p>
      <p class="form-write-us__item email-field">
        <label for="email">Ваш e-mail:</label>
        <input type="email" name="email" id="email" placeholder="email@example.com" required>
      </p>

      <p class="form-write-us__item comment-field">
        <label for="comment">Текст письма:</label>
        <textarea name="comment" id="comment" placeholder="В свободной форме"></textarea>
      </p>
      <button class="button button-form" type="submit">Отправить</button>
    </form>
    <button class="modal-close" type="button"><span class="visually-hidden">Закрыть</span></button>
  </section>
</div>

1 ответ 1

2

Вам нужно отключить валидацию формы перед сабмитом. Для этого добавьте атрибут novalidate к форме.

// Открытие модального окна "Напишите нам"
var buttonWriteUs = document.querySelector(".js-button-write-us");
var modalWriteUs = document.querySelector(".js-modal-write-us");
var buttonCloseWriteUs = modalWriteUs.querySelector(".modal-close");
var formWriteUs = modalWriteUs.querySelector("form");
var loginWriteUs = modalWriteUs.querySelector("#name-surname");
var emailWriteUs = modalWriteUs.querySelector("#email");


buttonCloseWriteUs.addEventListener('click', function(evt) {
  evt.preventDefault();
  modalWriteUs.classList.remove('js-modal__show');
});

formWriteUs.addEventListener('submit', function(evt) {
  if (!loginWriteUs.value || !emailWriteUs.value) {
    evt.preventDefault();
    console.log("Нужно ввести имя и мейл!");
  }
});
<div class="modal-wrapper js-modal-write-us">
  <section class="modal modal-write-us">
    <h2 class="visually-hidden">Напишите нам...</h2> 
    <form class="form-write-us" action="https://echo.htmlacademy.ru" method="post" novalidate>
      <p class="form-write-us__item name-field">
        <label for="name-surname">Ваше имя:</label>
        <input type="text" name="name-surname" id="name-surname" placeholder="Имя Фамилия" required>
      </p>
      <p class="form-write-us__item email-field">
        <label for="email">Ваш e-mail:</label>
        <input type="email" name="email" id="email" placeholder="email@example.com" required>
      </p>

      <p class="form-write-us__item comment-field">
        <label for="comment">Текст письма:</label>
        <textarea name="comment" id="comment" placeholder="В свободной форме"></textarea>
      </p>
      <button class="button button-form" type="submit">Отправить</button>
    </form>
    <button class="modal-close" type="button"><span class="visually-hidden">Закрыть</span></button>
  </section>
</div>

3
  • Это кнопка открытия модального окна этой формы. 26 июл 2018 в 10:45
  • @СтаниславКремса обновил ответ
    – yolosora
    26 июл 2018 в 11:01
  • все верно, заработало, поставил вам плюсик и отметил галочкой) 26 июл 2018 в 11:03

Ваш ответ

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

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