2

Есть форма. В ней следующие поля (FirstName, LastName, Company, Email, Password) + кнопка с Onclick (отправка данных на сервер).

У всех полей прописан параметр 'required', а для

email pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$".

Вшитая в HTML5 валидация не работает с Onclick. Как можно исправить это?

2
  • использовать onSubmit
    – Qwertiy
    9 июл 2018 в 8:11
  • Спасибо! Помогло! 9 июл 2018 в 8:30

1 ответ 1

4

как используя onClick оставить валидацию полей (text, email)?

Вот так используя событий submit:

var form = document.querySelector('form')

form.addEventListener('submit', function(e) {
  // Не посылает на сервер
  e.preventDefault();
  //----------------------------------------------------------------
  // Проверка mail
  var mail = document.querySelector('.mail');
  var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$/;

  if (re.test(mail.value)) { // Если прошел
    console.log('Passes');
  } else{
   console.error('You shall not pass!');
  }
  //----------------------------------------------------------------
  // Так же можете проверять и text
})
<form action="">
  <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" class="mail">
  <input type="submit">
</form>

1

Ваш ответ

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

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