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

Question

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

Даниэль, удивительное объяснение! Несколько слов по этому и хорошему списку указателя контекста выполнения this в случае обработчиков событий.

В двух словах this в JavaScript указывает объект, у которого (или из контекста выполнения которого) текущая функция была запущена, и она всегда доступна только для чтения, вы все равно не можете ее установить (такая попытка закончится сообщением «Недопустимая левая сторона в присваивании».

Для обработчиков событий: встроенный обработчики событий, такие как <element onclick="foo">, переопределяют любые другие обработчики, прикрепленные ранее и раньше, поэтому будьте осторожны, и лучше не вмешиваться в встроенное делегирование событий. И благодаря Заре Алавердян, которая вдохновила меня на этот список примеров через несогласие обсуждение:)

el.onclick = foo; // in the foo - obj
el.onclick = function () {this.style.color = '#fff';} // obj
el.onclick = function() {doSomething();} // In the doSomething - Window
el.addEventListener('click',foo,false) // in the foo - obj
el.attachEvent('onclick, function () { // this }') // window, all the compliance to IE :)
<button onclick="this.style.color = '#fff';"> // obj
<button onclick="foo"> // In the foo - window, but you can <button onclick="foo(this)">

2

validation javascript jquery html forms

задан AndrewL64 16 January 2019 в 12:15

2 ответа

score 0 · Answer 1

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

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

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

score 0 · Answer 2

Использование атрибута 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 :

Измените input type="submit" на button type="button" , чтобы кнопка отправки сначала запустила функцию вместо прямой попытки отправки формы. Также убедитесь, что изменили значение атрибута name и значение атрибута id submit на что-то еще, например submitBtn или submitForm , так что вы можете вручную запустить метод submit() позже в функции.
Добавьте элемент с идентификатором "eresult" , где ваша функция проверки может отправить сообщения об ошибках в.
Добавьте прослушиватель кликов к кнопке отправки, чтобы запустить функцию проверки.
Измените значение атрибута id вашего элемента textarea на message .
Используйте тот же 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

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

2 ответа

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

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

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