I currently have two input fields email
and text
in my HTML code. Inside Javascript, I am attempting to do a reportValidity()
for both before moving on to the next step in a multi-step form. For some reason, if I do a inputs.some(input => {console.log(input.reportValidity())})
I get the values true
and true
for both form inputs when appropriate.
After removing the console.log()
, I am expecting the next line and const allValid
to be equals to true
but when i console.log(allValid)
it returns false
.
I have omitted some things from the JavaScript
block below, but when I do a console.log()
of input
from inputs
, it logs the correct input fields.
HTML Code
<div >
<label for="email">Email</label>
<input type="email" name="email" id="email" >
</div>
<div >
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
JavaScript
const multiStepForm = document.querySelector("[data-multi-step]")
const formSteps = [...multiStepForm.querySelectorAll("[data-step]")]
const inputs = [...formSteps[currentStep].querySelectorAll("input")]
console.log("Each run starts here")
inputs.forEach(input => console.log(input.reportValidity()))
const allValid = inputs.every(input => {input.reportValidity()})
console.log(allValid)
When ran, inside the console
my log is
This run starts here.
true x 2 <- from reportValidity()
false <- from const AllValid
CodePudding user response:
Solution was to remove a pair of {}
as I was not returning anything.
JavaScript
const multiStepForm = document.querySelector("[data-multi-step]")
const formSteps = [...multiStepForm.querySelectorAll("[data-step]")]
const inputs = [...formSteps[currentStep].querySelectorAll("input")]
console.log("Each run starts here")
inputs.forEach(input => console.log(input.reportValidity()))
const allValid = inputs.every(input => input.reportValidity()) //Remove {} here
console.log(allValid)