Form Validation - multiple inputs with same class

Question

I am trying to validate inputs. On this particular page, I have 5 inputs. Three will be selected and all three require numbers. Just for this case, I am only going to check that the user has input a number (there will be more things to validate, but I want to get this right first so I don't repeat myself on multiple pages).

const formE = document.getElementById("SubmissionForm");
const sE = document.getElementById("input1");
const tE = document.getElementById("input2");

formE.addEventListener("click", validate);
function validate(e) {
  e.preventDefault();

  let valid = true;

  if (!sE.value) {
    const sError = document.querySelector("showError");
    sError.forEach((showError));
    sError.setAttribute("aria-hidden", false);
    sError.setAttribute("aria-invalid", true);
  }
  return valid;
}

Now, I am aware this doesn't work with this (I got stuck thinking about a forEach and I just haven't taken it further yet.

In the HTML under the input I have this:

<span role="alert" class="showError" aria-hidden="true"> Please enter a number </span>

Bear in mind, this is just for the number validation I will add other validation points too.

So - what is the correct syntax for the JS to find all the showError classes and make their become visible when the user doesn't put in a number?

And use the principles behind client-side form validation which is built into the browser. — Andy
– Andy, Commented Nov 17, 2022 at 20:12
I do use the HTML validation as well, but this is requiring considerably more complex calculations. I was just starting it with "number" and was going to build the remaining pieces after getting the basics. — Paul Davis
– Paul Davis, Commented Nov 17, 2022 at 21:24

Emre · Accepted Answer · 2022-11-17 21:42:58Z

1

There are a lot of ways for that. Basically I can suggest this solution relevant to your question:

const button = document.querySelector('#button');
const number_1 = document.querySelector('#number_1');
const number_2 = document.querySelector('#number_2');
const error = document.querySelector('#error');

button.addEventListener('click',()=>{
    if(isNaN(parseInt(number_1.value)) || isNaN(parseInt(number_2.value))){
        error.removeAttribute('hidden');
    }else{
        error.setAttribute('hidden','');
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validation Demo</title>
</head>
<body>
    <input type="text" id="number_1">
    <input type="text" id="number_2">
    <button id="button">Check them!</button>
    <p id="error" hidden>You can type only numbers!</p>
</body>
</html>

answered Nov 17, 2022 at 21:42

Emre

8608 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form Validation - multiple inputs with same class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related