jQuery驗證：投入全部通過驗證後消失

Question

摸不清這一個...

在下面的表格中，所有的輸入，驗證通過對所有的人，只留下提交立即消失按鈕可見。

例如，如果我在完成之前點擊此表單上的「提交」，所有未完成的字段都會被賦予「.incomplete」錯誤類以標記它們不正確。如果我然後逐個瀏覽輸入並完成它們，則錯誤類將消失。但只要最後剩餘的輸入完成且錯誤類別被移除，所有輸入消失，只留下「提交」。

我可以告訴它與.incomplete CSS類有關，只要用戶點擊「提交」而沒有正確完成所有字段，就會應用該類。我無法弄清楚是什麼導致這種行爲。任何幫助或想法，非常感謝！對不起，他的代碼片段的長度，但我認爲太多的信息比在這種情況下不夠好。

驗證規則：

$(document).ready(function() { 
     $("#form").validate({ 
      errorLabelContainer: ".textbox", 
      keyup: false, 
      onfocusout: false, 
      onclick: false, 
      errorElement: "input", 
      errorClass: "incomplete", 
      rules: { 
       organization: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       firstname: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       lastname: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       email: { 
        defaultInvalid: true, 
        required: true, 
        email: true 
        }, 
       phone: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 10, 
        }, 
      }, 
     }); 
    }); 

HTML表單：

<div id="form"> 
    <div id="form_title">REQUEST INFO</div> 
    <form id="form" name="form_container" action="#"> 
     <!-- fields --> 
     <input id="organization" class="textbox" type="text" name="organization" minlength="2" value="Organization"/> 
     <input id="firstname" class="textbox" type="text" name="firstname" minlength="2" value="First Name"/> 
     <input id="lastname" class="textbox" type="text" name="lastname" minlength="2" value="Last Name"/> 
     <input id="email" class="textbox" type="text" name="email" value="Email"/> 
     <input id="phone" class="textbox" type="text" name="phone" value="Phone"/> 
     <!-- submit button --> 
     <input id="button" name="submit" class="button" type="submit" value="submit"> 
    </form> 
</div> 

我使用jQuery驗證插件的1.9版本。

Answer 1

首先，你有沒有添加自定義方法

jQuery.validator.addMethod("defaultInvalid", function(value, element) 
{ 
    return !(element.value == element.defaultValue); 
}); 

然後糾正您的驗證JS，你在底部

(document).ready(function() { 
     $("#form").validate({ 
      errorLabelContainer: ".textbox", 
      keyup: false, 
      onfocusout: false, 
      onclick: false, 
      errorElement: "input", 
      errorClass: "incomplete", 
      rules: { 
       organization: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       firstname: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       lastname: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 2 
        }, 
       email: { 
        defaultInvalid: true, 
        required: true, 
        email: true 
        }, 
       phone: { 
        defaultInvalid: true, 
        required: true, 
        minlength: 10 
       } 
      } 
     }); 
    }); 

也有額外的逗號，我建議你試試這樣說：

$('#Form').validate({   
      onchange: false,    
      errorLabelContainer: $('.error-container'), 
      wrapper: "p", 
        rules: { ...//specify rules here } 
});