检查空输入Javascript答案

【问题标题】：Check for empty input Javascript检查空输入Javascript
【发布时间】：2021-08-29 00:41:31
【问题描述】：

我正在尝试使用 javascript 实现一个演示联系表单，以便如果任何输入为空，则会为每个输入触发自定义错误消息。

html代码的关键部分（阅读量大见谅）：

<form action="/contact.php" method="POST" id="contact--form" onsubmit="return contactFormEmpty()" name="contact--form"></form>
 <input class="form--input" type="email" name="email" id="email" placeholder="CORREO ELECTRONICO"><br>
 <p id="contact--form--email--error" class="contact--form--error">Error: no se ha entrado ningun correo</p>

 <input class="form--input" type="text" name="nombre" id="name" placeholder="NOMBRE"><br>
 <p id="contact--form--name--error" class="contact--form--error">Error: no se ha entrado ningun nombre</p>

 <input class="form--input" type="text" name="surrname" id="surrname" placeholder="APELLIDO"><br>

 <input class="form--input form--problem--info" type="text" name="info" id="info" placeholder="DESCRIBE TU PROBLEMA"><br>
 <p id="contact--form--info--error" class="contact--form--error">Error: no se ha descrito el problema.</p>

 <input type="submit" value="ENVIAR INFORMACIÓN" form="contact--form">

</form>

CSS 代码：

.contact--form--error {
    color: red;
    display: none;
}

Javascript 代码：

function contactFormEmpty() {
    let email = document.getElementById('email').value; email.trim();
    let name = document.getElementById('name').value; name.trim();
    if(email=="") {
        document.getElementById("contact--form--email--error").style.display='block';
        return false;
    }
    else if(name=="") {
        document.getElementById("contact--form--name--error").style.display='block';
        return false;
    }
}

这里的主要问题是 javascript 代码正确应用于电子邮件，但在 else if 中却不适用。

但是，如果我删除电子邮件并按名称更改它可以正常工作，我不能让它同时适用于两者（我还想将它应用于带有名称信息的输入，如果它会添加另一个）

如果您发现javascript代码有任何改进，我很感激这些信息，我是一个从未学习过javascript并且已经自学了一段时间的学生。

【问题讨论】：

email.trim(); 什么都不做；你没有使用它的结果。只需let email = document.getElementById('email').value.trim();。
谢谢 Sebastian :D，已经改变了。

标签： javascript html css forms

【解决方案1】：


//if is empty email or name good luck

if(!email||!name){
 // your code
}

【讨论】：

【解决方案2】：

添加

return true;

到函数结束。

function contactFormEmpty() {
  let email = document.getElementById("email").value;
  email.trim();
  let name = document.getElementById("name").value;
  name.trim();
  if (email == "") {
    document.getElementById("contact--form--email--error").style.display =
      "block";
    return false;
  } else if (name == "") {
    document.getElementById("contact--form--name--error").style.display =
      "block";
    return false;
  }
  return true;
}

.contact--form--error {
  color: red;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <form action="/contact.php" method="POST" id="contact--form" onsubmit="return contactFormEmpty()" name="contact--form"></form>
    <input class="form--input" type="email" name="email" id="email" placeholder="CORREO ELECTRONICO"><br>
    <p id="contact--form--email--error" class="contact--form--error">Error: no se ha entrado ningun correo</p>
   
    <input class="form--input" type="text" name="nombre" id="name" placeholder="NOMBRE"><br>
    <p id="contact--form--name--error" class="contact--form--error">Error: no se ha entrado ningun nombre</p>
   
    <input class="form--input" type="text" name="surrname" id="surrname" placeholder="APELLIDO"><br>
   
    <input class="form--input form--problem--info" type="text" name="info" id="info" placeholder="DESCRIBE TU PROBLEMA"><br>
    <p id="contact--form--info--error" class="contact--form--error">Error: no se ha descrito el problema.</p>
   
    <input type="submit" value="ENVIAR INFORMACIÓN" form="contact--form">
   
   </form>
  </body>
</html>

【讨论】：

问题不在于检查“名称”字段，而是之后发生的事情。假设你没有输入名字，会出现错误信息，函数会返回false，但是当你输入名字时，错误信息不会消失，函数也不会返回true，那么你认为函数没有检查名称！
我已经试过这个选项，它不会修改结果，你试过代码吗？
我更新了评论，你可以在这里试试！