Validate each input before activating the next button

Question

I have some inputs and a next button. At the moment I validated that the button is deactivated. If I fill in the name field, the button is activated.

var b = document.getElementById('button');
var input = document.getElementById("inputtext");

input.addEventListener("input", displayButton); 

function displayButton() {
    if (input.value === "") {
        b.disabled = true;
    } else {
        b.disabled = false;
    }
}

displayButton();

<input type="text" id="inputtext" placeholder="Enter name">
<input type="text" id="inputtext2" placeholder="Enter last_name">
<input type="text" id="inputtext3" placeholder="Enter country">
<button id="button">Next</button>

If I only want to verify that the first and last name are filled and not the city field, how would it be? And also if I click on the disabled button insert a text that says "First fill all the fields".

if you wrap all your inputs in a `form` element, you can observe the `change` event directly on the form: https://stackoverflow.com/questions/10760847/entire-form-onchange — GrafiCode, Aug 30 '23 at 16:17
Add variables for all of the inputs; only enabled the button if all three elements have a value? Disabled buttons don't receive the click event; you'd need to wrap the button and listen for delegated events. — Heretic Monkey, Aug 30 '23 at 16:19

0stone0 · Answer 1 · 2023-08-31T13:30:03.593

You could add an event listener to all the <input>'s, then on input, check if some() inputs don't have a value, use that to enable/disable the button. (Using trim() so we ignore whitespaces)

Regarding the "First fill all the fields" message, a disabled button can't be clicked.

You could add some logic to the validate function below that will set some message in another component.

var b = document.getElementById('button');
var inputs = [ ...document.querySelectorAll("input") ];

const validate = (e) => {
    b.disabled = inputs.some(ii => !ii.value.trim().length)
}

inputs.forEach(i => i.addEventListener("input", validate));

<input type="text" id="inputtext" placeholder="Enter name">
<input type="text" id="inputtext2" placeholder="Enter last_name">
<input type="text" id="inputtext3" placeholder="Enter country">
<button id="button" disabled>Next</button>

Edit: Based on OP's comment, the same idea but with a querySelcetorAll that just targets 2 out of 3 fields. (I've renamed the field id's to something more descriptive.

var b = document.getElementById('button');
var inputs = [ ...document.querySelectorAll("#input_name, #input_last_name") ];

const validate = (e) => {
    b.disabled = inputs.some(ii => !ii.value.trim().length)
}

inputs.forEach(i => i.addEventListener("input", validate));

<input type="text" id="input_name" placeholder="Enter name">
<input type="text" id="input_last_name" placeholder="Enter last_name">
<input type="text" id="input_country" placeholder="Enter country">
<button id="button" disabled>Next</button>

thanks, I understand that this verifies that all the "inputs" in my template right? If I only want to verify that the first and last name are filled and not the city field, how would it be? — ele0603, Aug 30 '23 at 16:25
I'm using `document.querySelectorAll("input")` to find all the ``'s. You could change it to something like `document.querySelectorAll("#inputtext, #inputtext2")` to only check some inputs. Change the selector to your likings. — 0stone0, Aug 30 '23 at 16:26
@ele0603 please edit your question accordingly, where you say `when I fill in the 3 entries and not just the first one` — GrafiCode, Aug 30 '23 at 16:29
I've added a (collapsed) snippet showing the querySelectorAll with just 2 fields. — 0stone0, Aug 31 '23 at 13:30

score 0 · Answer 2 · answered Aug 31 '23 at 14:22

Mark inputs as required

<form id="someId">
  <input type="text" id="inputtext" required placeholder="Enter name" />
  <input type="text" id="inputtext2" required placeholder="Enter last_name" />
  <input type="text" id="inputtext3" placeholder="Enter country" />
  <input type="submit" id="button" value="Next" />
</form>

Use built-in form validation

const form = document.getElementById("someId")
form.addEventListener("submit", ev => {
  ev.preventDefault()
  // Notifies user as well
  const isValid = form.reportValidity()
  if (!isValid) return
  // process data from inputs
})

Validate each input before activating the next button

2 Answers2