0

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.

Paul Davis
  • 495
  • 4
  • 14
  • your title mentions `.checkValidity()` your code has `.reportValidity()` - and there's no code to explain what either code actually even is – Jaromanda X Nov 19 '22 at 06:56
  • I just added a JSBin and I will edit (I was testing the difference between check and report). Apologies, that was sloppy. – Paul Davis Nov 19 '22 at 07:16
  • oh, I see what `.checkValidity` and `.reportValidity` are now ... seems they focus on invalid elements .. – Jaromanda X Nov 19 '22 at 07:35
  • Yeah, so my plan was to check for invalid inputs and prevent the submit button from being pushed. – Paul Davis Nov 19 '22 at 07:48
  • to be honest, all the examples I've seen don't do it on every keystroke on every input like you do – Jaromanda X Nov 19 '22 at 08:00
  • What would you suggest? What if someone copies and pastes a number in the input? – Paul Davis Nov 19 '22 at 08:03
  • @PaulDavis Usually you wait until they submit the form before checking. Otherwise it makes it hard to edit, since it might be invalid until you finish typing. – Barmar Nov 19 '22 at 08:48
  • @Barmar - yeah, this is a special case scenario though. This is because a 5 point calculation is made and certain outcomes can't occur so I don't want a calculation to occur until the inputs are deemed valid. So for functionality, I am locking the submit button until valid. – Paul Davis Nov 19 '22 at 09:10
  • @Barmar were you able to see the JSBin https://jsbin.com/gowulec/edit?html,js,output - is there anything obvious that is making this behaviour of the cursor jumping? – Paul Davis Nov 19 '22 at 09:11
  • Haven't looked yet, but [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) is preferable to jsbin or jsfiddle. – Barmar Nov 20 '22 at 18:57

0 Answers0