jquery每个函数不能按预期工作

你好我检查表单，看看输入是否已经填写。我保持提交按钮被禁用，直到填写必填字段。但是，如果我输入所需的textarea，即使以前的必填字段未填写，按钮也会启用。jquery每个函数不能按预期工作

这里是一个小提琴 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: [email protected]</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 
       } 
      }); 

     }); 
    })()

除非您填写所有必填字段，按钮将不会启用，但如果我跳过前三个并输入启用按钮的消息。发生什么事了？

来源

2016-09-16 badsyntax

如果最后的''不是空字符串，那么该按钮的disabled属性将被删除;这正是你的代码编写的目的。 –

通过最终输入你意思是textarea？所以如果（this.value ==''）只是针对最终输入？我也试过如果（'.required'==''） – badsyntax

问题在于你每次在循环中添加和删除属性。最后，它包含了最后一次迭代的设置。 – Barmar

我已经更新了小提琴：

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

    });

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

来源

2016-09-16 23:40:42 NRaf

嗨，我们需要保持的，而不是添加一次又一次消除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._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
    if (!email.test(this.value)) { 
 
     $("#email").attr('placeholder', '[email protected]').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: [email protected]</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>

来源

2016-09-16 23:53:02

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

摘要：

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

您正在对“必需”类使用验证（启用/禁用提交按钮），该类用于多个输入元素。当你编辑最后一个文本框时，验证将在所有输入元素上运行（它需要类）&单独考虑最终元素（在你的案例中是文本区域）的结果会导致问题。

来源

2016-09-16 23:59:38 msg

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

无需在第一个空场被发现运行整个循环。

if (this.value == '') { 

     requiredFieldsCompleted = false;   
     return false; 
}

来源

2016-09-17 00:07:16 JVM

jquery每个函数不能按预期工作

回答

相关问题