Disable Submit button until fields are filled in

Question

I am having some trouble enabling a button once 3 fields are filled. I would like to enable the Submit button once all 3 fields are filled in. It is successfully disabled on page load, but does not become enabled once the fields are filled in. Thanks for any and all help in advance!

<div class="contact-form">
 <form id="contact-form" method="post" action="contact-form-handler.php">
  <input name="companyname" type="text" id="companyName" placeholder="  Company Name">
  <br>
  <input name="name" type="text" id="contactName" placeholder="  Contact Person">
  <br>
  <input name="email" type="email" id="Email" placeholder="  Your Email">
                        <br>
                        <input type="tel" id="Phone" name="Phone" placeholder="  Phone Number">
                        <br>
                        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
                        <br>
                        <button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
                    </form>
                </div>

                <script>
                    function myFunction() {
                            alert("Your message has been sent!");
                    }

                    jQuery("#Submit").prop('disabled', true);

                  var toValidate = jQuery('#companyName, #Email, #contactName'),
                      valid = false;
                  toValidate.keyup(function () {
                      if (jQuery(this).val().length > 0) {
                          jQuery(this).data('valid', true);
                      } else {
                          jQuery(this).data('valid', false);
                      }
                      toValidate.each(function () {
                          if (jQuery(this).data('valid') == true) {
                              valid = true;
                          } else {
                              valid = false;
                          }
                      });
                      if (valid === true) {
                          jQuery("#Submit").prop('disabled', false);
                      } else {
                          jQuery("#Submit").prop('disabled', true);
                      }
                  });
                </script>
        <br>
        <input type="tel" id="Phone" name="Phone" placeholder="  Phone Number">
        <br>
        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
        <br>
        <button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
    </form>
</div>

<script>
    function myFunction() {
            alert("Your message has been sent!");
    }

    jQuery("#Submit").prop('disabled', true);

  var toValidate = jQuery('#companyName, #Email, #contactName'),
      valid = false;
  toValidate.keyup(function () {
      if (jQuery(this).val().length > 0) {
          jQuery(this).data('valid', true);
      } else {
          jQuery(this).data('valid', false);
      }
      toValidate.each(function () {
          if (jQuery(this).data('valid') == true) {
              valid = true;
          } else {
              valid = false;
          }
      });
      if (valid === true) {
          jQuery("#Submit").prop('disabled', false);
      } else {
          jQuery("#Submit").prop('disabled', true);
      }
  });
</script>

Answer 1

This answer is for input inside a span or div.

HTML

<form>
    <div style='border:1px solid black;' id="content" contenteditable="true" type="input" onKeyUp="call()"></div>
    <button id='button'>Submit</button>
</form>

Javascript

const button = document.getElementById("button");
const content = document.getElementById("content");

function call() {
  button.disabled = !content.textContent.trim();
}

Answer 2

The main problem is that you're really only checking the last element in your list. Each time through your loop, you're giving valid a new value. So if the last one is valid, you're considering the whole check valid, regardless of the status of the previous checks.

To overcome this, you should check the current value of valid if we have previously given it a value within this iterator.

function myFunction() {
    alert("Your message has been sent!");
}

jQuery("#Submit").prop('disabled', true);

var toValidate = jQuery('#companyName, #Email, #contactName'), valid = false;

toValidate.keyup(function () {
    if (jQuery(this).val().length > 0) {
        jQuery(this).data('valid', true);
    } else {
        jQuery(this).data('valid', false);
    }

    // this indicates that we haven't assigned a true value to valid yet
    var firstCheck = true;

    toValidate.each(function () {
        // if the current element is valid AND this is either the first check OR the previous checks were also valid
        if (jQuery(this).data('valid') == true && (valid || firstCheck)) {
            valid = true;
        } else {
            valid = false;
        }

        // we've assigned a value to valid, so each next time we will know to check that value in addition to the current element
        firstCheck = false;
    });

    if (valid === true) {
        jQuery("#Submit").prop('disabled', false);
    } else {
        jQuery("#Submit").prop('disabled', true);
    }
});

DEMO

Answer 3

Try the following code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="contact-form">
                    <form id="contact-form" method="post" action="#">
                        <input name="companyname" type="text" class="form-control vcheck" id="companyName" placeholder="  Company Name">
                        <br>
                        <input name="name" type="text" class="form-control vcheck" id="contactName" placeholder="  Contact Person">
                        <br>
                        <input name="email" type="email" class="form-control vcheck" id="Email" placeholder="  Your Email">
                        <br>
                        <input type="tel" id="Phone" class="form-control vcheck" name="Phone" placeholder="  Phone Number">
                        <br>
                        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
                        <br>
                        <button type="submit" name="form[Submit]" id="submit" class="btn btn-primary" disabled="disabled">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script>
        // On change in any of the fields with the class vcheck we run this function
        $('.vcheck').change(function() {
            // We store the values of each input field in a variable
            var company = $('#companyName').val();
            var name = $('#contactName').val();
            var email = $('#email').val();
            var phone = $('#Phone').val();
            // We check for null (empty) values
            if (company == '' || name == '' || email == '' || phone == '') {
                // When we find something blank set or keep the button to disabled
                $('#submit').attr('disabled', 'disabled');
            } else {
                // When all conditions are met and values are good we enable the button
                $('#submit').removeAttr('disabled');
            }
        });
    </script>
</body>

</html>