Попытка отобразить текст при пустых значениях ввода для проверки формы

Question

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

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

Интересно, может ли кто-нибудь взглянуть и увидеть, что не так и почему не отображается сообщение.

function customerFormValidation() {
  reason = "";
  reason += validateName(customer_form.firstname);
  reason += validateEmail(customer_form.email);
  reason += validatePhone(customer_form.phone);
  reason += validateAddress(customer_form.address);
  reason += validateCity(customer_form.city);
  reason += validateState(customer_form.state);
  reason += validateZip(customer_form.zip);

  console.log(reason);
  if (reason.length > 0) {
    return false;
  } else {
    return false;
  }
}

function validateName(firstname) {
  var error = "";
  if (firstname.value == "") {
    document.getElementById("firstname").style.display = "block";
    document.getElementById("firstname").innerText = "Please enter your first name";
    document.getElementById("firstname").style.borderColor = "red";
    document.getElementById("firstname").focus();
  } else {
    firstname.style.background = 'White';
    document.getElementById('firstname').innerHTML = "";
  }
  return error;
}

function validateEmail(email) {
  var error = "";
  if (email.value == "") {
    document.getElementById("email").style.display = "block";
    document.getElementById("email").innerText = "Please enter an email address";
    document.getElementById("email").style.borderColor = "red";
    document.getElementById("email").focus();
  } else {
    email.style.background = 'White';
    document.getElementById('email').innerHTML = "";
  }
  return error;
}

function validatePhone(phone) {
  var error = "";
  if (phone.value == "") {
    document.getElementById("phone").style.display = "block";
    document.getElementById("phone").innerText = "Please enter a phone number";
    document.getElementById("phone").style.borderColor = "red";
    document.getElementById("phone").focus();
  } else {
    phone.style.background = "White";
    document.getElementById("phone").innerHTML = "";
  }
  return error;
}

function validateAddress(address) {
  var error = "";
  if (address.value == "") {
    document.getElementById("address").style.display = "block";
    document.getElementById("address").innerText = "Please enter an address";
    document.getElementById("address").style.borderColor = "red";
    document.getElementById("address").focus();
  } else {
    address.style.background = "White";
    document.getElementById("address").innerHTML = "";
  }
  return error;
}

function validateCity(city) {
  var error = "";
  if (address.value == "") {
    document.getElementById("city").style.display = "block";
    document.getElementById("city").innerText = "Please enter your city";
    document.getElementById("city").style.borderColor = "red";
    document.getElementById("city").focus();
  } else {
    city.style.background = "White";
    document.getElementById("city").innerHTML = "";
  }
  return error;
}

function validateState(state) {
  var error = "";
  if (state.value == "") {
    document.getElementById("state").style.display = "block";
    document.getElementById("state").innerText = "Please your state";
    document.getElementById("state").style.borderColor = "red";
    document.getElementById("state").focus();
  } else {
    state.style.background = "White";
    document.getElementById("state").innerHTML = "";
  }
  return error;
}

function validateZip(zip) {
  var error = "";
  if (zip.value == "") {
    document.getElementById("zip").style.display = "block";
    document.getElementById("zip").innerText = "Please your zip code";
    document.getElementById("zip").style.borderColor = "red";
    document.getElementById("zip").focus();
  } else {
    zip.style.background = "White";
    document.getElementById("zip").innerHTML = "";
  }
  return error;
}

<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
  <h1 style="text-align: center">Billing Address</h1>
  <div class="row">
    <label for="fname"><i class="fa fa-user"></i> Full Name</label>
    <input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
    <label for="email"><i class="fa fa-envelope"></i> Email</label>
    <input type="text" id="email" name="email" placeholder="john@example.com">
    <label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
    <input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
    <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
    <input type="text" id="address" name="address" placeholder="542 W. 15th Street">
    <label for="city"><i class="fa fa-institution"></i> City</label>
    <input type="text" id="city" name="city" placeholder="New York">


    <div class="col-50">
      <label for="state">State</label>
      <input type="text" id="state" name="state" placeholder="NY">
    </div>
    <div class="col-50">
      <label for="zip">Zip</label>
      <input type="text" id="zip" name="zip" placeholder="10001">
    </div>

  </div>
  <button class="fa orange btn" type="submit" onclick="HideForm()" id="customerBtn">Next</button>

</form>

Answer 1

Элементы, в которые вы пытаетесь ввести innerText, являются фактическими полями ввода. Вы должны добавить дополнительный элемент для каждого поля ввода. В примере firstname:

<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<div id="firstnameError" style="display: none"></div>

А затем в вашей функции проверки просто измените идентификатор элемента с firstname на новый div firstnameError:

document.getElementById("firstnameError").style.display = "block";
document.getElementById("firstnameError").innerText = "Please enter your first name";
document.getElementById("firstnameError").style.borderColor = "red";

То же самое и с остальными полями. В остальном ваш код выглядит нормально.