填写表格时可点击提交按钮答案

【问题标题】：Submit button clickable when form is filled in填写表格时可点击提交按钮
【发布时间】：2020-06-06 12:29:15
【问题描述】：

我想创建一个认证页面，设计快完成了:)

我只想在我的页面上添加最后一件事。

我希望如果表单没有完全完成（例如缺少一个框），提交按钮是灰色的并且不可点击。如果填写了整个表单，按钮会变为蓝色且可点击。

问题是我不懂JavaScript（我是初学者）...

这是我的表格：

<form method="post" action="traitement.php">
   <div class="text">
      <div class="group">
         <label for="username">Téléphone, email ou nom d'utilisateur</label>
         <input type="text" name="username" id="username" autofocus required class="champs" />
      </div>
      <div class="group">
         <label for="password">Mot de passe</label>
         <input type="password" name="password" id="password" required class="champs" />
      </div>
      <input type="submit" value="Se connecter" id="button" disabled="disabled" />
   </div>
</form>

你认为只有 CSS 可以吗？

你能帮帮我吗？

提前谢谢你:)

【问题讨论】：

请向我们展示您的尝试。如果您不了解 Javascript，请先学习，如果您难以找到解决方案，请再回来。我们无法为您编码。
这是这篇文章的副本 - stackoverflow.com/questions/13931688/…。而是检查它的答案...
这能回答你的问题吗？ Disable/Enable Submit Button until all forms have been filled

标签： javascript html css forms button

【解决方案1】：

你问了一个笼统的问题，所以我只能给你一个笼统的答案：

理论上，在某些情况下您可能只能使用 CSS。但在实践中，您很可能需要 JavaScript。使用支持表单输入验证的框架会更舒服。

如果您想获得更具体的答案，您需要提供更多详细信息，例如你到底想验证什么。但也许我的回答已经有帮助了。

【讨论】：

【解决方案2】：

有一个简单的解决方案，看起来像这样

<form method="post" action="traitement.php" id="loginForm">

首先将 id 添加到表单中，然后创建一个如下所示的 JS 脚本

document.getElementById("loginForm").addEventListener("keyup", function() {
  var userInput = document.getElementById('username').value;
  var passInput = document.getElementById('password').value;
  if (userInput !== '' && passInput !== '') {
      document.getElementById('button').removeAttribute("disabled");
  } else {
      document.getElementById('button').setAttribute("disabled", null);
  }  
});

在每次击键时，它都会检查两个输入是否都有值并相应地启用/禁用按钮

【讨论】：