Question

您好我通过表单查看输入是否已填写。我保持禁用提交按钮，直到填写所需的字段。但是，如果我输入所需的textarea，即使之前的必填字段未填写，也会启用该按钮。

这是一个小提琴 https://jsfiddle.net/v2to0fcw/1/

这是标记

<form action="/contact" method="post">
    <div class="form-row firstName">
        <p class="form-alert">Enter a valid first name.</p>
        <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
    </div>
    <div class="form-row lastName">
        <p class="form-alert">Enter a valid last name. Example: Smith</p>
        <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
    </div>
    <div class="form-row phone">
        <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
        <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
    </div>
    <div class="form-row email ">
        <p class="form-alert">Enter a valid email. Example: person@email.com</p>
        <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
    </div>
    <div class="form-row">
        <input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required">
    </div>
    <div class="form-row">
        <textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea>
    </div>
    <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right">
</form>

这是jquery

$(document).ready(function() 
{ 
    (function() 
    {
        $('.required').on('keyup change', function() 
        {
            $('.required').each(function() 
            {
                if (this.value == '') 
                {
                    $('#submit').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
                } 
                else 
                {
                    $('#submit').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
                }
            });

        });
    })()

除非您填写所有必填字段，否则按钮将不会启用，但如果我跳过前三个字段并输入消息，则按钮已启用。怎么回事？

Answer 1

我已经更新了小提琴：

https://jsfiddle.net/efbonrnr/1/

    $('.required').on('keyup change', function() 
    {
            var requiredFieldsCompleted = true;
        $('.required').each(function() 
        {
            if (this.value == '')
            {
                requiredFieldsCompleted = false;
            }
        });

        if (requiredFieldsCompleted)
        {
            $('#submit').removeAttr('disabled');

        }
        else
        {
            $('#submit').attr('disabled', 'disabled');
        }

    });

问题是您在每次检查后都禁用/启用该字段，而不考虑之前的项目。因此，只有最后一个必填字段会影响结果。

Answer 2

您好我们需要维护一个标记，而不是一次又一次地添加和删除disabled属性，这导致此问题看到我对变量var flag;的评论

$(document).ready(function() {
  (function() {
    $('.required').on('keyup change', function() {
      var flag = false; // we need to check if any of the field is empty then set it to true, we will decide the send button to be enabled or disabled after that
      $('.required').each(function() {
        if (this.value == '') {
          flag = true;
        }
      });
      if (flag) {
        $('#submit').attr('disabled', 'disabled');
      } else {
        $('#submit').removeAttr('disabled');
      }
    });
  })()

  $('#firstName').on('change', function() {
    var firstName = this.value;
    if (/^[a-zA-Z- ]*$/.test(firstName) == false) {
      $("#firstName").css('border', '1px solid #d22020').val('');
      $('.firstName .form-alert').css('display', 'block');
    } else {
      $("#firstName").css('border', 'none');
      $('.firstName .form-alert').css('display', 'none');
    }
  });

  $('#lastName').on('change', function() {
    var lastName = this.value;
    if (/^[a-zA-Z- ]*$/.test(lastName) == false) {
      $("#lastName").css('border', '1px solid #d22020').val('');
      $('.lastName .form-alert').css('display', 'block');
    } else {
      $("#lastName").css('border', 'none');
      $('.lastName .form-alert').css('display', 'none');
    }
  });

  $('#phone').on('change', function() {
    var phone = this.value;
    if (this.value !== '') {
      if (!$.isNumeric(phone)) {
        $("#phone").css('border', '1px solid #d22020').val('');
        $('.phone .form-alert').css('display', 'block');
      } else {
        $("#phone").css('border', 'none');
        $('.phone .form-alert').css('display', 'none');
      }
    }
  })

  $('#email').on('change', function() {
    var email = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    if (!email.test(this.value)) {
      $("#email").attr('placeholder', 'johnsmith@email.com').css('border', '1px solid #d22020').val('');
      $('.email .form-alert').css('display', 'block');
    } else {
      $("#email").css('border', 'none').attr('placeholder', 'Email *');;
      $('.email .form-alert').css('display', 'none');
    }
  });
});

.form {
  float: left;
  width: 300px;
}
.form-row {
  float: left;
  width: 100%;
  margin: 0 0 20px 0;
}
.label-control {
  float: left;
}
.required-label:after {
  float: right;
  margin: 3px 0 0 3px;
  content: '\f069';
  color: rgba(245, 0, 0, 1);
  font-family: 'FontAwesome';
  font-size: 8px;
}
.form-control {
  float: left;
  width: 100%;
  max-width: 100%;
  padding: 9px 9px;
  background-color: rgba(245, 245, 245, 1);
  border: none;
  border-radius: 0px;
  box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
  color: rgba(68, 68, 68, 1);
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  -webkit-appearance: none;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.form-control:hover,
.form-control:focus,
.form-control:active {
  box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
}
textarea {
  min-height: 175px;
}
input[type=submit] {
  box-shadow: none;
  cursor: pointer;
  letter-spacing: 1px;
}
input[type=submit]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-alert {
  float: left;
  display: none;
  width: 100%;
  color: rgba(210, 32, 32, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/contact" method="post" class="form">
  <div class="col-dual">
    <div class="form-row firstName">
      <label for="firstName" class="label-control required-label">First Name:</label>
      <p class="form-alert">Enter a valid first name.</p>
      <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
    </div>
    <div class="form-row lastName">
      <label for="lastName" class="label-control">Last Name:</label>
      <p class="form-alert">Enter a valid last name. Example: Smith</p>
      <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
    </div>
    <div class="form-row phone">
      <label for="phone" class="label-control">Phone:</label>
      <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
      <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
    </div>
    <div class="form-row email ">
      <label for="email" class="label-control required-label">Email:</label>
      <p class="form-alert">Enter a valid email. Example: person@email.com</p>
      <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
    </div>
  </div>
  <div class="col-dual">
    <div class="form-row">
      <label for="subject" class="label-control required-label">Subject:</label>
      <input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required">
    </div>
    <div class="form-row">
      <label for="message" class="label-control required-label">Message:</label>
      <textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea>
    </div>
    <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right">
  </div>
</form>

Answer 3

https://jsfiddle.net/v2to0fcw/5/

摘录：

 if (this.value == '') {
   $('#submit').attr('disabled', 'disabled');
   return false;
 }

您正在使用验证（启用/禁用提交按钮）而不是“必需”类，该类用于多个输入元素。当您编辑最后一个文本框时，验证将在所有输入元素（具有必需的类）和＆amp ;;单独考虑最终元素（在您的情况下是文本区域）的结果，这会导致问题。

Answer 4

更新了小提琴，https://jsfiddle.net/efbonrnr/9/

找到第一个空字段时无需运行整个循环。

if (this.value == '') {

      requiredFieldsCompleted = false;          
      return false;
}

jquery每个函数都没有按预期工作

4 个答案: