Проверка формы Javascript

Question

В настоящее время у меня есть HTML-форма с проверкой JavaScript.В настоящее время ошибки отображаются во всплывающем окне с помощью команды оповещения .... как я могу отображать сообщения об ошибках рядом с текстовыми полями, пожалуйста?Ниже мой текущий код:

 if (document.gfiDownloadForm.txtFirstName.value == '') {
  alert('Please fill in all required fields');
  return false;
 }

 var filter = /^([a-zA-Z '-]+)$/i
 if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) {
  alert('Please enter a valid First name');
  return false;
 }

 var filter = /^([a-zA-Z '-]+)$/i
 if (filter.test(document.gfiDownloadForm.txtLastName.value) == false) {
  alert('Please enter a valid Last name');
  return false;
 }


 if (document.gfiDownloadForm.txtCompany.value == '') {
  alert('Please enter a Company name');
  return false;
 }

Answer 1

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

<input type="text" id="txtFirstName" /><span id="firstNameError"></span>

Затем в своем коде Javascript вы установили innerHTML этого элемента формы на ваше сообщение об ошибке, если оно не проверяется, или на пустую строку '', если проверка действительно выполнена, например, так:

if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) {
    document.getElementById("firstNameError").innerHTML = 'Please enter a valid First name.';
    return false;
}
else {
    document.getElementById("firstNameError").innerHTML = '';
    return true;
}

Answer 2

Вы должны иметь <div> или <span> рядом с полем ввода, и вместо оператора alert просто установите содержимое <div> на соответствующее сообщение об ошибке.

, например

if (document.gfiDownloadForm.txtCompany.value == '') {
  document.getElementById('company_error').innerHTML = 'Please enter a company name';
  return false;
}