在填写字段之前禁用提交按钮

Question

填充 3 个字段后，我在启用按钮时遇到了一些问题。我想在填写完所有 3 个字段后启用“提交”按钮。它在页面加载时成功禁用，但在填写字段后不会启用。提前感谢所有帮助！

<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

试试下面的代码：

<!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>

Answer 2

主要问题是您实际上只检查列表中的最后一个元素。每次通过你的循环，你都会给 valid 一个新值。因此，如果最后一个有效，则无论之前检查的状态如何，您都认为整个检查都有效。

为了解决这个问题，您应该检查 valid 的当前值，如果我们之前在这个迭代器中给它一个值。

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

此答案适用于跨度内的输入或 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

document.getElementById("button").disabled = true;
var f = document.getElementById('content');
function call () {
    if(f.innerHTML != null)
        document.getElementById("button").disabled = false;//off
    if(f.innerHTML == '')
        document.getElementById("button").disabled = true;
}

在填写字段之前禁用提交按钮

Disable Submit button until fields are filled in

javascript

forms

button

disabled-control