как сделать кнопку button неактивной если есть пустые поля input

Question

Есть HTML страница входа, login и password - поля для ввода, и есть кнопка "войти". Как мне сделать, чтобы если поле login или password пустое, кнопка была неактивной?

Сам код:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>• Login </title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.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, user-scalable=no">
    <title>Login</title>
  </head>
  <body>
    <div class="content">
      <div class="flex-div">
        <div class="name-content">
          <h1 class="logo">test logins</h1><br>
          <p style="color:#aaa">Подтверждения личности аккаунта</p>
        </div>
          <form action="login.php" method="POST">
            <input type="text" name="login" placeholder="Номер телефона или эл. адрес"/>
            <input type="password" name="password"  placeholder="Пароль">
            <button class="login">Войти</button><br><br>
            <a href="https://google.com">Забыли пароль?</a>
          </form>
      </div>
    </div>
  </body>
</html>
<!-- partial -->
  
</body>
</html>

Answer 1

Можно обойтись чистым CSS'ом :)

Я добавил к инпутам атрибут required, а в CSS идёт проверка, если требуемый инпут невалидный (то есть там нет никакой информации), то тогда любой последующей кнопке с классом .login добавлять какие-то стили.

input:required:invalid ~ button.login {
  opacity: .65;
  pointer-events: none;
}

<div class="content">
  <div class="flex-div">
    <div class="name-content">
      <h1 class="logo">test logins</h1><br>
      <p style="color:#aaa">Подтверждения личности аккаунта</p>
    </div>
    <form action="login.php" method="POST">
      <input type="text" name="login" placeholder="Номер телефона или эл. адрес" required />
      <input type="password" name="password"  placeholder="Пароль" required />
      <button class="login">Войти</button><br><br>
      <a href="https://google.com">Забыли пароль?</a>
    </form>
  </div>
</div>

БЛОГ НА HUSL

как сделать кнопку button неактивной если есть пустые поля input

Ответы (1 шт):