JavaScript显示多个错误消息表单提交？

Question

What am I doing wrong in my JavaScript? I would like to display an error message if a user forgets to type in any of my HTML form fields. I would like to create an error message for the name, email, and phone number fields. Even if a user puts in their name, I would like error messages for the remainder 2, or remainder 1, or no error messages. I have attached my JavaScript code below. Thank you for those who help.

function validateForm() {
  var ret = true;
  var name = document.forms["contactform"]["name"].value;
  if (name == "") {
    document.getElementById('error').innerHTML = "Please enter your name";
    ret = false;
  }
  var email = document.forms["contactform"]["email"].value;
  if (email == "") {
    document.getElementById('erroremail').innerHTML = "Please enter your email";
    ret = false;
  }

  var phone = document.forms["contactform"]["phone"].value;
  if (phone == "") {
    document.getElementById('errorphone').innerHTML = "Please enter your phone";
    ret = false;
  }
  return ret;
}

Answer 1

Create a variable called something like :

var fieldsInError = "";

Then in your validation in each check if it fails validation add the field:

fieldsInError += "name," (or whatever the field is)

Then at the end of the function update your error field with something like:

document.getElementById('error').innerHTML = "Please enter " + fieldsInError.substring(0, fieldsInError.length-1);

So your function would look something like this:

function validateForm() {
  var fieldsInError = "";
  var name = document.forms["contactform"]["name"].value;
  if (name == "") {
    fieldsInError += "name,"
  }
  var email = document.forms["contactform"]["email"].value;
  if (email == "") {
    fieldsInError += "email,"
  }

  var phone = document.forms["contactform"]["phone"].value;
  if (phone == "") {
    fieldsInError += "phone,"
  }

  if(fieldsInError != ""){
    document.getElementById('error').innerHTML = "Please enter " + fieldsInError.substring(0, fieldsInError.length-1);
    return false;
  } else {
    return true;
  }
}

Answer 2

If you want separate error display for each input you could just add else with empty innerHTML .

Something like this:

var name = document.forms["contactform"]["name"].value;
var nameError = document.getElementById('error');
if (name == "") {
  nameError.innerHTML = "Please enter your name";
  ret = false;
} else {
  nameError.innerHTML = "";
}

Full example here: https://jsfiddle.net/1h1tkh7y/