Помогите пожалуйста Если в форме есть незаполненные поля, выводи alert с предупреждением о том, что все поля должны быть заполнены

Question

const form = document.querySelector('#login-form')

form.addEventListener('submit', onFormSubmit );

function onFormSubmit(event) {
    event.preventDefault();

  const formData =  new FormData(event.currentTarget);

  console.log(formData);
  
  formData.forEach((value, name) => {
    console.log(`name`, name );
    console.log(`value`, value);
  });

  document.getElementById("login-form").reset();
}
function validate_form ()
{
    valid = true;

        if ( document.login-form.email.password.value == "" )
        {
                alert ( "Все поля должны быть заполнены." );
                valid = false;
        }

        return valid;
}

<!DOCTYPE html>
<html lang="ru">
  <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>Task 8</title>
    <link rel="stylesheet" href="css/common.css" />
    <style>
      #login-form {
        max-width: 320px;
        display: flex;
        flex-direction: column;
      }

      #login-form label {
        margin-bottom: 16px;
      }

      #login-form input,
      #login-form button {
        width: 100%;
        padding: 4px;
        font: inherit;
      }
    </style>
  </head>
  <body>
    <p><a href="index.html">Go back</a></p>

    <form id="login-form" >
      <label>
        Email
        <input  type="email" name="email" />
      </label>
      <label>
        Password
        <input type="password" name="password" />
      </label>
      <button onclick="validate_form ( )" type="submit">Login</button>
    </form>

    <script src="js/task-08.js" type="module"></script>
  </body>
</html>

Answer 1

Во-первых, вы не получили сами инпуты, то что указано внутри проверки блока if абсолютно неправильно, сначала получите все инпуты в переменную, например так:

const inputs = document.querySelectorAll('input');

Тут мы получили ВСЕ инпуты, но нам надо работать с каждым отдельно, поэтому перебираем по очереди:

inputs.foreach(input => {
    if (input.value.trim() === '') { 
    alert("error")
    }
}

Ты получишь значение каждого инпута используя value, после чего, на случай если там только пробелы, уберешь их методом trim, и сравнишь результат с пустой строкой, если это так - значит поле не заполнили, выводим алерт

БЛОГ НА HUSL

Помогите пожалуйста Если в форме есть незаполненные поля, выводи alert с предупреждением о том, что все поля должны быть заполнены

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