填写该字段时，错误消息不会消失

Question

在我的表单上，我希望每次不填写一个字段时都会出现一条错误消息，它实际上是有效的，但是当该字段被填写时，消息仍然存在。

我知道错误可能在哪里，必须在这里，但是我尝试更改名称并希望将其正确，但是它不起作用，并且无论如何都发送了表单，就像JavaScript没被发送过一样。即使在那里。

    nameError = "Please type your name";
    document.getElementById("nome_error").innerHTML = nameError;

代码：

document.getElementById("contactos").onsubmit = function() {
  var nome = document.forms["contactos"]["NomeM"].value;
  var assunto = document.forms["contactos"]["Assunto"].value;
  var email = document.forms["contactos"]["EmailMen"].value;
  var mensagem = document.forms["contactos"]["Mensagem"].value;

  var submit = true;

  if (nome == null || nome == "") {
    nameError = "Please type your name";
    document.getElementById("nome_error").innerHTML = nameError;
    submit = false;
  }

  if (assunto == null || assunto == "") {
    emailError = "Please type the subject of your message";
    document.getElementById("assunto_error").innerHTML = emailError;
    submit = false;
  }

  if (email == null || email == "") {
    telephoneError = "Please type your email";
    document.getElementById("email_error").innerHTML = telephoneError;
    submit = false;
  }

  if (mensagem == null || mensagem == "") {
    telephoneError = "Please type your message";
    document.getElementById("mensagem_error").innerHTML = telephoneError;
    submit = false;
  }

  return submit;
}

function removeWarning() {
  document.getElementById(this.id + "_error").innerHTML = "";
}

document.getElementById("NomeM").onkeyup = removeWarning;
document.getElementById("Assunto").onkeyup = removeWarning;
document.getElementById("EmailMen").onkeyup = removeWarning;
document.getElementById("Mensagem").onkeyup = removeWarning;

<section class="site-section bg-light" id="section-contact">
  <div class="container">
    <div class="row">

      <div class="col-md-12 text-center mb-5 site-animate">
        <h2 class="display-4">Contacte-nos</h2>
        <div class="row justify-content-center">
          <div class="col-md-7">
          </div>
        </div>
      </div>

      <div class="col-md-7 mb-5 site-animate">
        <form action="index.php?cmd=contform" method="post" name="contactos" id="contactos">
          <div class="form-group">
            <label for="NomeM" class="sr-only">Name</label>
            <input type="text" class="form-control" name="NomeM" id="NomeM" name="NomeM" placeholder="Nome">
            <span class="error"><p id="nome_error"></p></span>
          </div>
          <div class="form-group">
            <label for="Assunto" class="sr-only">Assunto</label>
            <input type="text" class="form-control" name="Assunto" id="Assunto" name="Assunto" placeholder="Assunto">
            <span class="error"><p id="assunto_error"></p></span>
          </div>
          <div class="form-group">
            <label for="EmailMen" class="sr-only">Email</label>
            <input type="email" class="form-control" id="EmailMen" name="EmailMen" placeholder="Email">
            <span class="error"><p id="email_error"></p></span>
          </div>
          <div class="form-group">
            <label for="Mensagem" class="sr-only">Messagem</label>
            <textarea name="Mensagem" id="Mensagem" name="Mensagem" cols="30" rows="10" class="form-control" placeholder="Escreva a sua mensagem"></textarea>
            <span class="error"><p id="mensagem_error"></p></span>
          </div>
          <div class="form-group">
            <input type="submit" name="submit" id="submit" class="btn btn-primary btn-lg" value="Enviar Mensagem">
          </div>
        </form>
      </div>
      <div class="col-md-1"></div>

      <?php 
		 $sql="select * from Contactos";
		 $res=$lig->query($sql);
		 while($lin=$res->fetch_array()) {
		  echo "<div class='col-md-4 site-animate'><p><img src='images/chef.jpg' alt='' class='img-fluid'></p>";
          echo "<p class='text-black'>Morada: <br> ".$lin['Morada']." <br> ".$lin['CodPostal']." <br> <br> ";
          echo " Telefone: <br> ".$lin['TelefoneCont']." <br> <br> Email: <br> ".$lin['EmailCont']." <br> <br> Fax: <br> ".$lin['Fax']." ";
		 }
	 
?>
      </p>

    </div>



  </div>
  </div>
</section>

Answer 1

removeWarning()函数不起作用。它期望带有错误消息的元素的ID与输入字段的ID相同，并附加_error。但是这些ID并非完全一样。对于名称字段，ID为NomeM，但错误字段为nome_error，而不是NomeM_error。

修正您的ID，以便它们正确匹配，并且代码可以正常工作。不要忘记ID区分大小写。

顺便说一句，无需测试该值是否为null。它总是一个字符串。

document.getElementById("contactos").onsubmit = function() {
  var nome = document.forms["contactos"]["NomeM"].value;
  var assunto = document.forms["contactos"]["Assunto"].value;
  var email = document.forms["contactos"]["EmailMen"].value;
  var mensagem = document.forms["contactos"]["Mensagem"].value;

  var submit = true;

  if (nome == "") {
    nameError = "Please type your name";
    document.getElementById("NomeM_error").innerHTML = nameError;
    submit = false;
  }

  if (assunto == "") {
    emailError = "Please type the subject of your message";
    document.getElementById("Assunto_error").innerHTML = emailError;
    submit = false;
  }

  if (email == "") {
    telephoneError = "Please type your email";
    document.getElementById("EmailMen_error").innerHTML = telephoneError;
    submit = false;
  }

  if (mensagem == "") {
    telephoneError = "Please type your message";
    document.getElementById("Mensagem_error").innerHTML = telephoneError;
    submit = false;
  }

  return submit;
}

function removeWarning() {
  document.getElementById(this.id + "_error").innerHTML = "";
}

document.getElementById("NomeM").onkeyup = removeWarning;
document.getElementById("Assunto").onkeyup = removeWarning;
document.getElementById("EmailMen").onkeyup = removeWarning;
document.getElementById("Mensagem").onkeyup = removeWarning;

<section class="site-section bg-light" id="section-contact">
  <div class="container">
    <div class="row">

      <div class="col-md-12 text-center mb-5 site-animate">
        <h2 class="display-4">Contacte-nos</h2>
        <div class="row justify-content-center">
          <div class="col-md-7">
          </div>
        </div>
      </div>

      <div class="col-md-7 mb-5 site-animate">
        <form action="index.php?cmd=contform" method="post" name="contactos" id="contactos">
          <div class="form-group">
            <label for="NomeM" class="sr-only">Name</label>
            <input type="text" class="form-control" name="NomeM" id="NomeM" name="NomeM" placeholder="Nome">
            <span class="error"><p id="NomeM_error"></p></span>
          </div>
          <div class="form-group">
            <label for="Assunto" class="sr-only">Assunto</label>
            <input type="text" class="form-control" name="Assunto" id="Assunto" name="Assunto" placeholder="Assunto">
            <span class="error"><p id="Assunto_error"></p></span>
          </div>
          <div class="form-group">
            <label for="EmailMen" class="sr-only">Email</label>
            <input type="email" class="form-control" id="EmailMen" name="EmailMen" placeholder="Email">
            <span class="error"><p id="EmailMen_error"></p></span>
          </div>
          <div class="form-group">
            <label for="Mensagem" class="sr-only">Messagem</label>
            <textarea name="Mensagem" id="Mensagem" name="Mensagem" cols="30" rows="10" class="form-control" placeholder="Escreva a sua mensagem"></textarea>
            <span class="error"><p id="Mensagem_error"></p></span>
          </div>
          <div class="form-group">
            <input type="submit" name="submit" id="submit" class="btn btn-primary btn-lg" value="Enviar Mensagem">
          </div>
        </form>
      </div>
      <div class="col-md-1"></div>
    </div>
  </div>
  </div>
</section>