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

Question

我想创建一个认证页面，设计已经接近完成:)

我只想在我的页面上添加最后一个东西。

我希望如果表格没有填写完整（例如缺少一个框），提交按钮是灰色的，不能点击。如果整个表格都填好了，按钮就会变成蓝色，可以点击。

问题是我不懂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就能实现吗？

你能帮助我吗？

先谢谢你:)

Answer 1

你问的是一个通用的问题，所以我只能给你一个通用的答案。

理论上，可能有的情况下，你可以只用CSS工作。但实际上，你很可能需要JavaScript。使用一个支持表单输入验证的框架会更舒服。

如果你想有一个更具体的答案，你需要提供更多的细节，比如你到底想验证什么。但也许我的回答已经很有帮助了。

Answer 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);
  }  
});

每次击键时，它将检查两个输入是否都有价值，并相应地启用和禁用按钮。