Javascript - Validate each input before activating the next button

ele0603
August 31, 2023
152 views
0 votes
2 Answers

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".

Tags: javascript

Answers

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>

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
})

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Validate each input before activating the next button

Answers