Question 43591 in Html Question posted in
Some basic documentation can be found here.

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

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);
        }
    });

}
Tags:

3

Answers


  1. 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);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search