How to make validation of the form?

Question

I create validation for the form. If the second field is filled, and the first field is empty - the submit button is activated

My code - https://jsfiddle.net/wogdfb3k/

(function() {

  'use strict';

  function init(form) {

    const inputs = form.querySelectorAll('.form__input');
    const inputName = form.querySelector('.form__input--name');
    const submit = form.querySelector('.form__submit');

    function generateErrors(text) {
      let error = document.createElement('div');
      error.classList.add('form__error');
      error.textContent = text;

      return error;
    }

    function removeErrors() {
      const errors = form.querySelectorAll('.form__error');
      for (let i = 0; i < errors.length; i++) {
        if (errors[i] > 0) {
          submit.setAttribute('disabled', true);
        }
        errors[i].remove();
      }

    }

    function checkFieldsEmpty() {
      for (let i = 0; i < inputs.length; i++) {

        if (!inputs[i].value) {
          const error = generateErrors('This is a required field');
          inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);
          submit.setAttribute('disabled', true);
        } else if (inputs[i].value.length < 3 || inputs[i].value.length > 40) {
          const error = generateErrors('3 to 40 characters');
          inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);

          submit.setAttribute('disabled', true);

        } else {
          submit.removeAttribute('disabled');
        }
      }
    }

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

      removeErrors();
      checkFieldsEmpty();
    }

    form.addEventListener('input', validate);
    form.addEventListener('submit', validate);
  }

  const forms = document.querySelectorAll(".form");
  forms.forEach(init);


})();

* {
  box-sizing: border-box;
}

.form {
  padding: 20px;
  border: 1px solid #ccc;
}

.form__input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 5px 15px;
}

.form__input+.form__input {
  margin-top: 10px;
}

.form__submit {
  display: block;
  margin-top: 10px;
  width: 100%;
  padding: 10px 15px;
}

.form__error {
  color: #f00;
  margin: 5px 0 20px;
}

<form action="#" class="form">
  <input type="text" class="form__input form__input--1" placeholder="Input 1">
  <input type="text" class="form__input form__input--2" placeholder="Input 2">
  <button class="form__submit" disabled>Submit</button>
</form>

<form action="#" class="form">
  <input type="text" class="form__input form__input--1" placeholder="Input 1">
  <input type="text" class="form__input form__input--2" placeholder="Input 2">
  <button class="form__submit" disabled>Submit</button>
</form>

Problem code

function checkFieldsEmpty() {
            for (let i = 0; i < inputs.length; i++) {

                if (!inputs[i].value) {
                    const error = generateErrors('Это обязательное поле');
                    inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);                
                    submit.setAttribute('disabled', true);
                } 

                else if (inputs[i].value.length < 3 || inputs[i].value.length > 40) {
                    const error = generateErrors('От 3 до 40 символов');
                    inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);

                    submit.setAttribute('disabled', true);

                } 

                else{
                    submit.removeAttribute('disabled');
                }
            }
        }

I expect that the button will be active for all fields of the form, but in fact it turns out the button becomes active when filling in the second field

Answer 1

You need to adapt your checkFieldsEmpty function slightly so it removes the disabled attribute after all fields are checked and only if all tests passed, something like that:

        function checkFieldsEmpty() {
            let disabled = false;
            for (let i = 0; i < inputs.length; i++) {
                if (!inputs[i].value) {
                    const error = generateErrors('This is a required field');
                    inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);
                    disabled = true;
                } else if (inputs[i].value.length < 3 || inputs[i].value.length > 40) {
                    const error = generateErrors('3 to 40 characters');
                    inputs[i].parentElement.insertBefore(error, inputs[i].nextSibling);
                    disabled = true;
                }
            }
            if(!disabled) {
                submit.removeAttribute('disabled');
            };
        }