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

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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