CODEWITHSUNDEEP
javascripthtmlinputcheckvalidity
Paul Davis
Paul Davis

Reputation: 525

Cursor jumps from input to input when .reportValidity() is being assessed as a variable

I am checking the validity of five unique inputs to prevent form submission when invalid inputs remain.

sE.addEventListener("input", (e) => {
  if (
    Number.isNaN(e.target.valueAsNumber) ||
    sE.valueAsNumber >= Number(sE.max) ||
    sE.valueAsNumber <= Number(sE.min)
  ) {
    e.preventDefault();
    calcButton.disabled = true;
  } else {
    calcButton.disabled = false;
  }

This does appear to work to prevent the calculation button from being enabled, but only when the input (ie sE) is being looked at. This doesn't look at all the other inputs.

So I thought it would be better to try this:

sE.addEventListener("input", (e) => {
  let reportS = sE.reportValidity();
  let reportU = uE.reportValidity();
  let reportV = vE.reportValidity();
  let reportA = aE.reportValidity();
  let reportT = tE.reportValidity();
  console.log(reportS, reportU, reportV, reportA, reportT);
  if (
    Number.isNaN(e.target.valueAsNumber) ||
    sE.valueAsNumber >= Number(sE.max) ||
    sE.valueAsNumber <= Number(sE.min)
  ) {
    e.preventDefault();
    calcButton.disabled = true;
  } else {
    calcButton.disabled = false;
  }
});

This gives me the appropriate true/false relationship between all five inputs. But, when you click on one of the inputs on the HTML form and enter a number, the cursor then jumps to the last selected input. This makes input impossible.

When I removed the let statements and put them outside of the function they do not call the correct true/false relationship as they aren't updated as each input has new data added. However, when the let statements are outside of the function, even though they do not accurately reflect the true/false relationship, the cursor does not jump from input to input.

I am very much a beginner so I am not sure what to look for when it comes to troubleshooting this strange phenomenon.

I made a JSBin for this https://jsbin.com/gowulec/edit?html,js,output

When you click all three checkboxes and then try to add data into the input.

Upvotes: 0

Views: 215

Answers (0)

Related Questions