Блог

Главная - Вопросы по программированию - Моя форма не отправляется, даже если проверка правильна

Моя форма не отправляется, даже если проверка правильна

#javascript #html #css

Вопрос:

Я создал форму, которая проверяет, действительно ли электронное письмо, и если оно действительно, то оно будет отправлено. Я не уверен, но я думаю, что он не отправляется, потому что я добавил .preventDefault, но если я не использую preventDefault, форма не будет проверять правильность и напрямую отправлять. Я все еще учусь использовать javascript, пожалуйста, помогите мне исправить мою ошибку. Спасибо

кодовое обозначение : https://codepen.io/jerico001/pen/yLMZyWJ

 HTML
<form id="form" class="form" novalidate>
            <div class="form-control">
              <input
                type="email"
                placeholder="Email address"
                id="email"
                class="email"
                name="email"
              />
              <small></small>
              <button class="submit">Request Access</button>
            </div>
          </form>

JS
 const form = document.getElementById("form");
      const email = document.getElementById("email");
      const regx =
        /^[a-zA-Z0-9.!#$%amp;'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:.[a-zA-Z0-9-] )*$/;

      form.addEventListener("submit", (e) => {
        e.preventDefault();

        checkInputs();
      });

      function checkInputs() {
        const emailValue = email.value.trim();

        if (emailValue.match(regx)) {
          setSuccessFor(email);
        } else {
          setErrorFor(email, "Looks like this is not an email");
        }
      }

      function setErrorFor(input, message) {
        const formControl = input.parentElement;
        const small = formControl.querySelector("small");

        formControl.className = "form-control error";
        small.innerText = message;
      }

      function setSuccessFor(input) {
        const formControl = input.parentElement;
        formControl.className = "form-control success";
      }

Комментарии:

1. Я не вижу, куда вы отправляете форму

2. Вы могли бы сделать это с помощью требуемого атрибута и псевдокласса :допустимо codepen.io/gc-nomade/pen/XWMObeE (без javascript)

Ответ №1:

Вы неправильно настраиваете прослушиватель событий, и это предотвращает возможную отправку. Поместите событие на кнопку «Отправить» и введите эту кнопку= «отправить».

 <button type="submit" class="submit">Request Access</button>

Затем в вашем сценарии проверьте, не возвращает ли функция проверки значение true/false, чтобы решить, отправлять форму или нет

 const form = document.getElementById("form");
const btn = document.querySelector('button.submit'); 
btn.addEventListener("click", (e) => {
    e.preventDefault();
    if (checkInputs()) form.submit()
  });

  function checkInputs() {
    const emailValue = email.value.trim();
    if (emailValue.match(regx)) {
      setSuccessFor(email);
      return true;
    } else {
      setErrorFor(email, "Looks like this is not an email");
      return false;
    }
  }
Метки: ,