How to disable submit button until all mandatory fields are filled using html and vanilla js

Question

How to disable submit button until the user enters all fields and also how to use event listener on submit form.

<form action='index.html' id="form-user" onsubmit="init()">
  <input type="text" name="username" id="username" placeholder="username">
  <input type="email" name="email" id="email" placeholder="email">
  <input type="password" name="password" id="password" placeholder="password">
  <button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>

const init = function () {
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let email = document.getElementById("email").value;
  alert(username,password,email)
};

Jsfiddle link

Does this answer your question? [Disable/Enable Submit Button until all forms have been filled](https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled) — Nico Haase, Sep 30 '21 at 05:35

dave · Accepted Answer · 2021-09-30T06:07:48.987

Set up a validation object with booleans to record if all your values have met validation.

Then I'd loop through all your inputs and add an event listener to each of them. In this example I've checked to see if each has at least one character in them, but you might want to expand on this.

Finally, loop through your validation object and check if all the values are true. If they are, remove the disabled attribute from the button.

let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');

let inputValidator = {
  "username": false,
  "email": false,
  "password": false
}

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    let name = event.target.getAttribute('name');
    if (event.target.value.length > 0) {
      inputValidator[name] = true;
    } else {
      inputValidator[name] = false;
    };

    let allTrue = Object.keys(inputValidator).every((item) => {
      return inputValidator[item] === true
    });

    if (allTrue) {
      buttonSend.disabled = false;
    } else {
      buttonSend.disabled = true;
    }
  })
})

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username">
  <input type="email" name="email" id="email" placeholder="email">
  <input type="password" name="password" id="password" placeholder="password">
  <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button>
</form>

@Hitheshk, please do not ask several questions in one post. If you want to know how to extract the field values from a form do a search on SO. There will be multiple questions and answers addressing this topic. — Carsten Massmann, Sep 30 '21 at 05:50

score 2 · Answer 2 · answered Sep 30 '21 at 05:57

This is probably not what you are looking for but you can achieve almost the same effect by simply using the required attribute in your input fields:

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username" required>
  <input type="email" name="email" id="email" placeholder="email" required>
  <input type="password" name="password" id="password" placeholder="password" required>
  <button type="submit" name="submit" id='button-send' >SUBMIT</button>
</form>

Nicholas Bergesen · Answer 3 · 2021-09-30T06:34:17.850

Using the onBlur event will ensure the user has visited each field. You may also want to check the field contains a value, for that you can add the HTML required attribute.

var isDirty = {
  username: false,
  password: false,
  email: false
}

const init = function() {
    let incompleteItems = getIncompleteItems();
  if(incompleteItems.length > 0) {
    alert(`${incompleteItems} requires a value.`);
    return;
  }
  
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let email = document.getElementById("email").value;
  alert(`values: ${username}, ${email}, ${password}`);
};

const onChange = function(e) {
    isDirty[e.id] = true;
}

const getIncompleteItems = function() {
    let incomplete = "";
    for (const [key, value] of Object.entries(isDirty)) {
    if(value === false) {
        if(incomplete.length > 0) {
        incomplete += `, ${key}`;
      }
      else {
        incomplete = key;
      }
    }
  }
  return incomplete;
}

<form method='GET' id="form-user" onsubmit="init()">
  <input type="text" name="username" id="username" placeholder="username" onBlur="onChange(this)">
  <input type="email" name="email" id="email" placeholder="email" onBlur="onChange(this)">
  <input type="password" name="password" id="password" placeholder="password" onBlur="onChange(this)">
  <button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>

score 0 · Answer 4 · answered Sep 30 '21 at 06:59

Create a validation function which will check all the validations and sets the disabled property of the button if validation fails and vice versa. Call the validation function on every change of all the fields.

You can use oninput event

<input type="text" oninput="validate()">

How to disable submit button until all mandatory fields are filled using html and vanilla js

4 Answers4

Linked