Comment désactiver un bouton si l'une des entrées est vide (pur Javascript)

Question

J'essaie de créer un simple créateur d'article avec un titre, et je veux que le "post-btn" soit désactivé et que son curseur soit changé en "not-allowed" si l'une des entrées (titre, texte) est vide ( value.length === 0; ), j'ai écrit une fonction utilisant forEach et un eventListener mais cela n'a pas fonctionné, je pense à un autre moyen en ajoutant une eventListener pour les deux entrées seules, mais je n'ai pas pu imaginer de moyen court de le faire sans écrire beaucoup de if déclarations. J'ai donc décidé de demander de l'aide, si vous pouvez corriger les erreurs que j'ai faites ici ou m'aider avec un tout nouveau code efficace et compréhensible. Pour rendre les choses plus claires, je dirais : si le titre est vide, les boutons sont désactivés ; si le texte est vide, les boutons sont également désactivés ; si aucun des deux n'est vide, les boutons sont activés.

let createPostBehavior = function(){
  let inputs = document.querySelectorAll('.post-input');
  let postBtn =  document.querySelector('.post-btn');

  inputs.forEach(function(inp){
    inp.addEventListener('input', function(e){
      if(e.target.value.length === 0) {
        postBtn.disabled = true;
        postBtn.style.cursor = 'not-allowed';
      } else if (e.target.value.length > 0) {
        postBtn.disabled = false;
        postBtn.style.cursor = 'pointer';
      }

    })
  })
}
createPostBehavior();

<div class="create-post-wrapper">
        <div>
                <p class="sub-headline">Create a new post</p>
        </div>
        <div>
                <input class="post-input" type="text" placeholder="Title">
        </div>
        <textarea id="input" class="post-input"></textarea>
        <div class="buttons-wrapper">
                <button class="post-btn">Post</button>
        </div>
</div>

Answer 1

Actuellement, lorsque la modification de l'utilisateur rend une entrée non vide, vous concluez que tout va bien, mais c'est faux : une autre entrée pourrait encore être vide. Vous devez regarder l'ensemble du tableau et vérifier également les autres entrées. Dès que vous en trouvez une qui est vide, vous devez en conclure que les données ne sont toujours pas complètes.

Aussi, j'écouterais input sur l'élément wrapper : de cette façon, vous ne devez attacher qu'un seul écouteur. Ensuite, utilisez some pour savoir s'il y a toujours une entrée vide -- en itérant tous éléments d'entrée.

let postBtn = document.querySelector('.post-btn');
let wrapper = document.querySelector('.create-post-wrapper');
let inputs = [...wrapper.querySelectorAll('.post-input')];

function validate() {
  let isIncomplete = inputs.some(input => !input.value);
  postBtn.disabled = isIncomplete;
  postBtn.style.cursor = isIncomplete ? 'not-allowed' : 'pointer';
}

wrapper.addEventListener('input', validate);
validate();

<div class="create-post-wrapper">
  <div>
    <p class="sub-headline">Create a new post</p>
  </div>
  <div>
    <input class="post-input" type="text" placeholder="Title">
  </div>
  <textarea id="input" class="post-input"></textarea>
  <div class="buttons-wrapper">
    <button class="post-btn">Post</button>
  </div>
</div>

Answer 2

Quelque chose comme ça serait un moyen assez propre de le faire :

const form = document.querySelector('form');
const inputTitle = form.querySelector('input[type="text"]');
const inputContent = form.querySelector('textarea');
const submitButton = form.querySelector('button');

submitButton.disabled = true;

const state = {
  title: '',
  content: ''
};

const updateButton = () => {
  submitButton.disabled = !(state.title && state.content)
};

inputTitle.addEventListener('input', event => {
  state.title = event.target.value;
  updateButton();
});

inputContent.addEventListener('input', event => {
  state.content = event.target.value;
  updateButton();
});

form {
  display: flex;
  flex-direction: column;
}

form input,
form textarea {
  margin-top: 10px;
  padding: 5px;
}

form button {
  margin-top: 10px;
  padding: 5px;
  background-color: #8FBC8F;
  cursor: 'not-allowed';
}

form button:disabled {
  background-color: #EEE;
  cursor: 'pointer';
}

<div>
  <p>Create a new post</p>
  <form>
    <input type="text" placeholder="Title">
    <textarea > </textarea>
    <button>Submit</button>    
  </form>
</div>

Answer 3

Une autre façon de procéder consisterait à utiliser la fonction filter méthode. Nous l'utilisons dans ce cas comme un moyen de trouver toute entrée dont la longueur de la valeur est égale à 0. Après cela, nous effectuons simplement les opérations nécessaires sur le bouton.

let inputs = document.querySelectorAll('.post-input');
let postBtn =  document.querySelector('.post-btn');

inputs.forEach(inp => inp.addEventListener('input', checkInputs));

function checkInputs(event) {
    const inputArray = [...inputs];
    const missingInput = inputArray.filter(inp => inp.value.length === 0).length > 0;
    toggleButton(missingInput);
  }

function toggleButton(toggle) {
    postBtn.disabled = toggle;
    postBtn.style.cursor = toggle ? "not-allowed" : "pointer";
  }

<div class="create-post-wrapper">
        <div>
                <p class="sub-headline">Create a new post</p>
        </div>
        <div>
                <input class="post-input" type="text" placeholder="Title">
        </div>
        <textarea id="input" class="post-input"></textarea>
        <div class="buttons-wrapper">
                <button style="cursor: not-allowed" disabled class="post-btn">Post</button>
        </div>
</div>