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每個函數不能按預期工作

回答

相關問題