【问题标题】:jquery each function not working as intendedjquery 每个函数都没有按预期工作
【发布时间】:2016-09-16 23:33:43
【问题描述】:

您好,我通过表格查看输入是否已填写。在填写必填字段之前,我一直禁用提交按钮。但是,如果我输入必需的文本区域,即使之前的必填字段未填写,按钮也会启用。

这是一个小提琴 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
                }
            });

        });
    })()

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

【问题讨论】:

  • 如果最后的&lt;input&gt; 不是空字符串,则删除按钮的disabled 属性;这正是您编写代码的目的。
  • 最终输入是指文本区域吗?那么如果 (this.value == '') 只针对最终输入?我也试过 if ('.required' == '')
  • 问题是您每次都在循环中添加和删除属性。所以最后,它包含上次迭代的设置。

标签: javascript jquery html


【解决方案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');
        }

    });

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

【讨论】:

    【解决方案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>

    【讨论】:

      【解决方案3】:

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

      片段:

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

      您在“必需”类上使用验证(启用/禁用提交按钮),该类用于多个输入元素。当您编辑最后一个文本框时,验证会在所有输入元素(具有必需的类)上运行,并且仅考虑最终元素(在您的情况下为文本区域)的结果,这会导致问题。

      【讨论】:

        【解决方案4】:

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

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

        if (this.value == '') {
        
              requiredFieldsCompleted = false;          
              return false;
        }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-03-17
          • 2019-07-13
          相关资源
          最近更新 更多