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

lx0bsm1f 于 2023-01-01 发布在 Java

关注(0)|答案(3)|浏览(100)

我在填写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>

JavaScript

来源：https://stackoverflow.com/questions/51410246/disable-submit-button-until-fields-are-filled-in

3条答案

按热度按时间

rsl1atfo1#

请尝试以下代码：

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

赞(0）回复(0）举报 2023-01-01

agxfikkp2#

主要的问题是你实际上只检查了列表中的最后一个元素，每次循环，你都给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

赞(0）回复(0）举报 2023-01-01

w7t8yxp53#

这个答案适用于span或div内的输入。
超文本标记语言

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

赞(0）回复(0）举报 2023-01-01

我来回答

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

3条答案

相关问题

热门标签

最新问答