Javascript 填写表单时可单击提交按钮

我想创建一个身份验证页面，设计即将完成：）

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

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

问题是我不懂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才有可能吗

你能帮我吗

---

提前谢谢：）

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

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

---

如果你想得到更具体的答案，你需要提供更多的细节，例如，你到底想验证什么。但也许我的答案已经很有用了。

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

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

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

---

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

请向我们展示您的尝试。如果您不懂Javascript，请先学习，如果您很难找到解决方案，请回来。我们无法为您编码。这是此帖子的副本-。检查一下答案……这能回答你的问题吗？