Form validation on all inputs-CodePudding

I have a form and I want to do some checks on all the fields on keyup.

Only if all of the inputs are completed, then the message should be displayed.

In JS there's this function called checkValidity() which checks if an input is validated, but on my example it doesn't work right.

If I complete the first three fields, that message appears, but I don't want that.

I want that message to appear only when all of the nine fields are completed.

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

inputs.forEach(input => {
  input.addEventListener('keyup', () => {
    console.log(input);
    if (!input.checkValidity()) {
      document.querySelector('.message').classList.remove('d-none');
    } else {
      document.querySelector('.message').classList.add('d-none')
    }
  })
})

.d-none {
  display: none;
}

<form action="">
  <div >
    <div >
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
    </div>
  </div>
  <div >Validated</div>
</form>

Codepen: https://codepen.io/make96/pen/yLEeMpO?editors=1111

CodePudding user response：

I made changes in your JS code WITHOUT touching the HTML code, assuming that you want to keep the HTML code untouched. While I removed the checkValidity() function as it really works on basic form only, I added 3 choses in your JS code:

allFilled array to track if all inputs are filled or not (with 0 being empty input and 1 filled input)
index in your forEach to detect which input
also allEqual function to check if allFilled array items are 1 or not.

Once again, your JS code might work if the HTML code is touched, making the form really basic one, and vice versa, but I made changes for JS as it might serve to your needs

const inputs = document.querySelectorAll('input');
let allFilled = []; // This will be your track array to track if all inputs are filled or not

inputs.forEach((input, index) => { // Added index here to detect which input which is.
  allFilled.push(0); // Push 0 in allFilled Track Array for every input there is in HTML code.
   input.addEventListener('keyup', (e) => {
    if(e.target.value !== ""){ 
      allFilled[index] = 1 // Change the value of input statut in the AllFilled track array to indicate that it isn't empty one
    }
    else{
      allFilled[index] = 0 // Change the value of input statut in the AllFilled track array to indicate that the input is empty
    }
    allEqual(allFilled); // For every change in every input; the function allEqual is executed, the function checks if every input status in allFilled array is 1
  })
})

const allEqual = (array) => {
  if(array.every(val => val === 1)){
    document.querySelector('.message').classList.remove('d-none');
  } 
  else {
    document.querySelector('.message').classList.add('d-none')
  }
}

.d-none {
  display: none;
}

<form action="">
  <div >
    <div >
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
      <div >
        <div >Participant</div>
        <div >
          <input type="text" name="firstName" fieldName="firstName" >
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" >
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" >
          <label for="">Email</label>
        </div>
      </div>
    </div>
  </div>
  <div >Validated</div>
</form>

CodePudding user response：

You have inverted your condition, try the same code with the ! removed in your condition