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>

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

• javascript
• html
• forms

Share Improve this question Follow edited Sep 30, 2021 at 6:29 ThisCanBeNormal 22522 silver badges1414 bronze badges asked Sep 30, 2021 at 5:19 Hithesh kumarHithesh kumar 1,04611 gold badge1313 silver badges2828 bronze badges 1

• 1 Does this answer your question? Disable/Enable Submit Button until all forms have been filled – Nico Haase Commented Sep 30, 2021 at 5:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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>

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>

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 inpleteItems = getInpleteItems();
  if(inpleteItems.length > 0) {
    alert(`${inpleteItems} 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 getInpleteItems = function() {
    let inplete = "";
    for (const [key, value] of Object.entries(isDirty)) {
    if(value === false) {
        if(inplete.length > 0) {
        inplete += `, ${key}`;
      }
      else {
        inplete = key;
      }
    }
  }
  return inplete;
}

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

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()">