Javascript help - disable form button until both "input" and "textarea" are filled

Question

I have a small script disabling a form button until all inputs in my HTML are filled. I would like to also have "textarea" HTML be filled for the form button to be enabled.

In other words, the form button must be enabled if both "input" and "textarea" are filled in, not just "input".

I'm an absolute beginner with JS :(

This is the code I have:

$(document).ready(function (){
    validate();
    $('input').on('keyup', validate);

});


function validate(){

    $("input[class=form-control]").each(function(){
        if($(this).val().length > 0)
        {
            $("button[type=disabled-on-empty-form]").prop("disabled", false);
        }
        else
        {
            $("button[type=disabled-on-empty-form]").prop("disabled", true);
        }
    });

}

keyup will not fire if your user uses their mouse to paste in text. — epascarello, Mar 23 '23 at 15:24

score 1 · Accepted Answer · answered Mar 23 '23 at 15:12

You can do something like this.

$(document).ready(function() {
  validate();
  $('.form-control').on('keyup', validate);
});


function validate() {
  let isValid = true;
  $(".form-control").each(function() {
    if ($(this).val() == "") {
      isValid = false;
    }
  });
  
  if (isValid) {
    $("button[type=disabled-on-empty-form]").prop("disabled", false);
  } else {
    $("button[type=disabled-on-empty-form]").prop("disabled", true);
  }

}

Give each control a class of 'form-control'. So all your input and textarea will have this class. Note: Button element type should be either submit, button, or reset. You should add something like id or class to get the button element.

Unmitigated · Answer 2 · 2023-03-23T15:10:37.263

0

First, add textarea to the selector. In addition, use a boolean flag to store if any input was not filled and only disable the button at the end of the loop.

let disable = false;
$("input.form-control, textarea").each(function() {
    if(!$(this).val().length) disable = true;
});
$("button[type=disabled-on-empty-form]").prop("disabled", disable);

edited Mar 23 '23 at 15:10

answered Mar 23 '23 at 15:04

Unmitigated

76,500
11
62
80

score 0 · Answer 3 · answered Mar 23 '23 at 15:22

HTML has validation built in to prevent the form from being submitted, no JavaScript required. Just add the required attribute.

label {
  display:block;
  padding: .5rem;
}

<form>
  <label>Foo<input type="text" name "t" required/></label>
  <label>Bar<input type="text" name "t" required/></label>
  <label>Baz<textarea name "ta" required></textarea></label>
  <button>Submit</button>
</form>

If you want to fix your code, you should only be disabling the form when you find the issue since you have multiple elements. You code is undoing the last check.

function validate(){

const hasEmpty = $("input, textarea").toArray().some(function (elem) {
  return !elem.value.trim().length;
});

$("button").prop( "disabled", hasEmpty );

}

$("form :input").on("input", validate).trigger("input");

label {
  display:block;
  padding: .5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label>Foo<input type="text" name "t" /></label>
  <label>Bar<input type="text" name "t" /></label>
  <label>Baz<textarea name "ta" ></textarea></label>
  <button>Submit</button>
</form>

Javascript help - disable form button until both "input" and "textarea" are filled

3 Answers3