Disable button if specific input fields in steps are empty.

When we create new form , there input text fields  and click  button will be in it . In that form disable the button if specific ( mandatory)  input fields are empty. After filling  the input   text   fields the click button work or enabled . Otherwise it won’t work . 

For changes we need to add JS file:

const field1 = document.getElementById("field1");
const field2 = document.getElementById("field2");
const button = document.getElementById("button");

const step1 = Array();

field1.addEventListener("keyup", function (event) {
  step1[0] = field1.value;
  step1[1] = field2.value;
  validateStep1();
});

field2.addEventListener("keyup", function (event) {
  step1[0] = field1.value;
  step1[1] = field2.value;
  validateStep1();
});

function validateStep1() {
  for (var i = 0; i < step1.length; i++) {
    if (!step1[i]) {
      button.disabled = true;
      return;
    } else {
      button.disabled = false;
    }
  }
}

Output:

Leave a comment

Your email address will not be published. Required fields are marked *