Функция проверки формы JavaScript не работает

Я хочу проверить эту форму, и у меня написан javascript, но когда я нажимаю submit , он ничего не делает.

Только pattern=[a-zA-Z] работа

function validation() {
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;

  if (name == '' || surname == '' || message == '' || email == '') {
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  } else if (name.length < 2) {
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
  } else {
    return true;
  }
}
<aside id="sidebar">
  <div class="dark">
    <form action="#" name="form" method="POST" onsubmit="return validation();">
      <h3>Get A Quote</h3>

      <div>
        <label>Name</label><br>
        <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
      </div>
      <div>
        <label>Surname</label><br>
        <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
      </div>

      <div>
        <label>Email</label><br>
        <input type="email" name="email" id="email" placeholder="Email Address">
      </div>

      <div>
        <label>Message</label><br>
        <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
      </div>

      <input type="submit" name="submit" value="Submit">
    </form>
    <div id="eresult" style="color:red;"></div>
  </div>
</aside>
<footer>
  <p>Renars Web Design, Copyright &copy; 2019</p>
</footer>

Я ожидаю, если я не введу все поля, это должно сказать «Все поля обязательны для заполнения», но он просто отправляет форму.

2
задан AndrewL64 16 January 2019 в 12:15
поделиться

2 ответа

У вас есть ошибка в вашем коде. Просмотрите журнал ошибок консоли.

У вас неверный идентификатор в текстовом сообщении.

Другими словами, идентификатор «email» дублируется.

0
ответ дан Curlas 16 January 2019 в 12:15
поделиться

Использование атрибута required:

Просто добавьте атрибут required к каждому входу, если вы хотите сделать ввод обязательным.

Когда этот атрибут установлен, форма не будет отправлена ​​(и будет отображать сообщение об ошибке), когда ввод пуст (вход также будет считаться недействительным).


Проверьте следующий фрагмент кода и попробуйте отправить форму без заполнения некоторых или всех полей, чтобы увидеть, как работает атрибут required:

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*" required>
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*" required>
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address" required>
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)" required></textarea>
  </div>
  <input type="submit" name="submit" value="Submit">
</form>


Использование функции JavaScript:

Есть несколько вещей, которые необходимо исправить в JS, а также в HTML :

  1. Измените input type="submit" на button type="button" , чтобы кнопка отправки сначала запустила функцию вместо прямой попытки отправки формы. Также убедитесь, что изменили значение атрибута name и значение атрибута id submit на что-то еще, например submitBtn или submitForm , так что вы можете вручную запустить метод submit() позже в функции.
  2. Добавьте элемент с идентификатором "eresult" , где ваша функция проверки может отправить сообщения об ошибках в.
  3. Добавьте прослушиватель кликов к кнопке отправки, чтобы запустить функцию проверки.
  4. Измените значение атрибута id вашего элемента textarea на message .
  5. Используйте тот же if/else statement , который у вас уже есть, но добавьте return false; к вашему выражению else if и добавьте form.submit() к вашему окончательному else утверждению над return true; .

Н.Б. Мы должны были изменить атрибуты name и id вашей кнопки отправки ранее, чтобы form.submit() ссылался на метод submit(), а не кнопку отправки в функции проверки.


Проверьте и запустите следующий фрагмент кода для практического примера того, что я описал выше:

/* JavaScript */

document.querySelector("button").addEventListener("click", function(){
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;
  if(name=='' || surname=='' || message=='' || email==''){
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  }
  else if(name.length<2){
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
    return false;
  }

  else{
    form.submit();
    return true;
    
  }
});
<!-- HTML -->

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address">
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="message" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
  </div>
  <button type="button" name="submitBtn">Submit</button>
</form>
<div id="eresult"></div>
[1170 ]

0
ответ дан AndrewL64 16 January 2019 в 12:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: