結合功能+禁用

我已經寫了一些驗證，它工作得很好，但我似乎無法結合所有三個功能（當調用所有函數和試圖寫if語句或可能我只是誤解了某些東西），這將作出反應在$（'button：submit'）。attr（「disabled」，true）;當所有三個字段都被驗證時，該按鈕將被啓用，當該字段的開啓未被驗證時，它將禁用按鈕。結合功能+禁用

這裏是我的代碼：

$(document).ready(function(){ 

    var form = $("#contact-us"); 
    var name = $("#name"); 
    var nameInfo = $("#nameInfo"); 
    var email = $("#email"); 
    var emailInfo = $("#emailInfo"); 
    var message = $("#message"); 
    var messageInfo = $("#messageInfo"); 

    name.blur(validateName); 
    email.blur(validateEmail); 
    message.blur(validateMessage); 
    name.keyup(validateName); 
    email.keyup(validateEmail); 
    message.keyup(validateMessage); 

    function validateEmail(){ 
     var a = $("#email").val(); 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 
     if(filter.test(a)){ 
      emailInfo.removeClass("error2"); 
      emailInfo.text(""); 
      return true; 
     } 
     else{ 
      emailInfo.addClass("error2"); 
      emailInfo.text("Wrong email"); 
      return false; 
     } 
    } 

    function validateName(){ 
     if(name.val().length < 3) { 
      nameInfo.addClass("error"); 
      nameInfo.text("Wrote more than 3 characters"); 
      return false; 
     } 
     else { 
      nameInfo.removeClass("error"); 
      nameInfo.text(""); 
      return true; 
     } 
    } 

    function validateMessage(){ 
     if(message.val().length < 10) { 
      messageInfo.addClass("error3"); 
      messageInfo.text("Wrote more than 15 characters"); 
      return false; 
     } 
     else {   
      messageInfo.removeClass("error3"); 
      messageInfo.text(""); 
      return true; 
     } 
    } 

});

來源

2014-01-11 Kirils Fostr

我不想深潛太辛苦，但也許你的正則表達式是導致該問題？ –

「當所有三個字段驗證時，該按鈕將被啓用」。你在哪裏啓用按鈕？我沒有在代碼中看到它。 – linstantnoodles

@NicholasHazel for循環會阻止事情發展。 – knrz

你可以做的是：

$("input").keyup(function() { 
    var emailOk = validateEmail(); 
    var nameOk = validateName(); 
    var messageOk = validateMessage(); 

    if (emailOk && nameOk && messageOk) $("button.submit").addClass("show"); 
});

，然後刪除您blur和keyup聽衆。

Here's a working fiddle。

來源

2014-01-11 02:24:12 knrz

感謝您的解決方案！ –

不客氣！如果我回答了您的問題，請將我的答案標記爲已接受。 – knrz

Okey，我標記了它，但是我只有11個聲望，所以我不能投票你的問題:( –

從我的經驗來看，使用這種技術進行驗證是完全錯誤的，現在假設有人檢查了你的頁面，並刪除了disabled屬性！

最好的辦法是，以驗證在使用自己的algortihm提交（例如鏈中的所有驗證功能，並返回false如果事情wasnt有效，否則鏈應返回true）

或只是隨意驗證插件，像這一個： http://parsleyjs.org/

簡單：

<form id="demo-form" parsley-validate> 
    <label for="fullname">Full Name * :</label> 
    <input type="text" name="fullname" required /> 

    <label for="email">Email * :</label> 
    <input type="email" name="email" parsley-trigger="change" required /> 

    <label for="website">Website :</label> 
    <input type="text" name="website" parsley-trigger="change" parsley-type="url" /> 

    <label for="message">Message (20 chars min, 200 max) :</label> 
    <textarea name="message" parsley-trigger="keyup" parsley-rangelength="[20,200]"></textarea> 
</form>

來源

2014-01-11 02:36:46 ProllyGeek

謝謝你的你的答案，我只是想從寫我自己的代碼學到一些東西，我知道有很多插件，但無論如何，謝謝你的答案！ –

結合功能+禁用

回答

相關問題