Возникновение ошибок при неудачной проверке

Question

Пожалуйста, проверьте код

HTML код:

First Name: <input type="text" name="fname" id="fname" >
<p id='p1'></p> 

Last Name: <input type="text" name="lname" id="fname" >

<input type="submit" name="submit" value="Submit" onclick="return validate_form();" >

Код проверки:

function validate_form()
{
    if ( document.form.fname.value == "" )
    {
        $('#p1').val("Please fill in fname");
        return false;
    }
}

Я создал форму, в которой есть два текстовых поля (fname, lname). Теперь предположим, что я оставил текстовое поле 1 свободным, а затем нажимаю клавишу «Tab», чтобы перейти к следующему текстовому полю. Когда я перехожу ко второму текстовому полю, справа от текстового поля 1 должно появиться сообщение об ошибке (поле «имя файла»)

Пожалуйста, проверьте код и исправьте его .. Мой код не отображается здесь, как правило .. Как скопировать - вставьте код здесь, чтобы он мог быть видимым .. Я новичок, так что плз ...

Answer 1

Событие, которое вы хотите вызвать, называется «размытие» и может быть подключено так:

<input type="text" name="fname" id="fname" onblur="javascript:validate_form();" />

Или в jQuery:

$(function() {
  $('#fname').blur(validate_form);
});

ТеперьФункция validate_form 'будет подключена к действию «размытия» в вашем поле fname.

Чтобы опубликовать код в StackOverflow, выделите фрагменты кода ваших вопросов и ответов и нажмите кнопку с меткой «101010», чтобы заблокировать ее какcode.

Также см. комментарий theraccoonbear об использовании .html () вместо .val ().

EDIT: добавлена ​​версия jQuery и сохранен старый ввод для избирателей, проголосовавших выше.

Answer 2

onclick = "return validate_form ();">

Не помещайте код проверки формы на submit-onclick.Это относится к форме заявки.Таким образом, вы гарантированно будете вызывать код, однако форма будет отправлена.

if (document.form.fname.value == "")

Youиметь id на этом элементе управления, может также использовать document.getElementById('fname') или, поскольку вы, похоже, используете jQuery, $('#fname').val().Любой из них является недвусмысленным, который может не иметь доступа к входам непосредственно из объектов document и form.

$ ('# p1'). Val ("Пожалуйста, введите имя");

val() - для полей формы, а не для текстового содержимого.Вы хотите .text('message').

Answer 3

Cryo упомянул, что вы хотите событие onblur, но я думаю, что вам также нужно изменить код, который устанавливает сообщение об ошибке, чтобы использовать метод html (), а не метод val () в jQuery. например,

$('#p1').html("Please fill in fname");