Валидация формы на JavaScript

241
26 сентября 2018, 21:10

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

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>

Answer 1

Вам нужно отключить валидацию формы перед сабмитом. Для этого добавьте атрибут 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>

READ ALSO
Прокрутка submenu вверх

Прокрутка submenu вверх

Нужно перейти в мобильную версию

208
Highslide JS с ошибкой

Highslide JS с ошибкой

Подключил к сайту библиотеку Highslide JS

220
Как добраться до Overlay в LoadingObjectManager?

Как добраться до Overlay в LoadingObjectManager?

В документации к LoadingObjectManager (https://techyandex

218