禁用提交按鈕，直到所有輸入正確

Question

我已經成功地管理，以實現實時的表單驗證我的註冊頁面，這一切的偉大工程，除了我要禁用的形式向上提交按鈕，直到點所有的輸入是正確的，用戶已經檢查了兩個複選框（條款和條件以及隱私政策）。我曾嘗試給它一個去，但我從來沒有做過，所以不知道從哪裏開始，我問過幾個人，顯然這是與在下面的JavaScript底部返回false。任何幫助將非常感激。由於

HTML表單

<div id="overlay"> 


<div id="modal_wrapper"> 
     <div id="modal_content"> 

     <form id="jform" action="" method="post" enctype="multipart/form-data"> 
      <div id="modal_content_left"> 
      Register 

      <ul> 

       <li class="required" type="none"> 

        <label> 

         <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/> 

        </label> 

        <label> 
         <br /> 
         <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/> 

        </label> 
        <label> 
         <br /> 
         <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/> 

        </label> 


        <label> 
         <br /> 
         <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/> 
        </label> 
       </li> 


      </ul> 

      </div><!---end modal_content_left---> 

      <div id="modal_content_right"> 

      <!--<li class="required double" type="none">--> 


       <div id="payment_options"> 

        <p> 
         <label><img src="images/index/images/paypal.png" width="78" height="38" alt="PayPal" /> 
          <br /> 
          <input type="radio" name="payment_selection" value="paypal" id="payment_selection_0" checked/> 
          </label> 

         <label><img src="images/index/images/alertpay.png" width="78" height="38" alt="Alertpay" /> 
          <br /> 
          <input type="radio" name="payment_selection" value="alertpay" id="payment_selection_1" /> 
          </label> 

          <label><img src="images/index/images/check.png" width="78" height="38" alt="Check" /><br /> 
          <input type="radio" name="payment_selection" value="check" id="payment_selection_2" /> 
          </label> 

      </p> 
      <br /><br /><br /><br /> 
        Account Type 

        <p> 
         <label><img src="images/index/images/demo.png" width="78" height="38" alt="Demo" /> 
         <br /> 
         <input type="radio" name="account_type" value="demo" class="demo_radio" id="account_type_0" /> 
         </label> 

         <label><img src="images/index/images/real_account.png" width="78" height="38" alt="Real" /><br /> 
         <input type="radio" name="account_type" value="real" id="account_type_1" checked/> 
         </label> 

        </p> 
       </div><!---end payment_options---><br /><br /><br /> 

       <div id="final_reg"> 
       <div id="check_boxes"> 
       <p> 
       <li class="required" type="none"> 
       <label> 
        <input type="checkbox" name="agree_cons" value="terms" id="agree_cons_0" /> 
        I agree to Terms</label> 
       <br /><br /> 
       <label> 
        <input type="checkbox" name="agree_cons" value="privacy" id="agree_cons_1" /> 
        I agree to Privacy Policy</label> 
        </li> 

       <br /> 
       </p></div><!---end check_boxes---> 
       <div id="register_submit"> 
       <input name="submit" type="submit" class="register_submit" 
         id="register_submit" alt="Register" /> 
       </div><!---end register_submit---> 
      </div><!---end final_reg---> 
     </div><!---end mofal_content_right---> 

     </form> 
     </div><!---end modal_content---> 
     <div id="error_display"></div><!---end error_display---> 
</div><!---end modal_wrapper---> 

JavaScript代碼

$(document).ready(function() { 
jFunc={ 
    mustMatch: function(el,pt){ 
      if (pt.test(el.val())) 
       el.removeClass('error').addClass('correct') 
      else{ 
       jVal.errors = true; 
       el.removeClass('correct').addClass('error').effect("shake", { times:3, distance:5 }, 60); 
      } 
     }, 
    mustEqual: function (el,val){ 
      if (el.val()==val) 
       el.removeClass('error').addClass('correct') 
      else{ 
       jVal.errors = true; 
       el.removeClass('correct').addClass('error').effect("shake", { times:3, distance:5 }, 60); 
      } 
     } 
    } 
jVal = { 
    'username': function() { 
     jFunc.mustMatch($('#username'),/^(?=.*[a-z].*)\w{8,}$/i); 
    }, 
    'email': function() { 
     jFunc.mustMatch($('#email'),/^.+@.+[.].{2,}$/i); 
    }, 
    'password': function() { 
     jFunc.mustMatch($('#password'),/^.{8,}$/i); 
    }, 
    'cpassword': function() { 
     jFunc.mustEqual($('#cpassword'),$('#password').val()); 
    }, 
}; 
$('#username').change(jVal.username); 
$('#email').change(jVal.email); 
$('#password').change(jVal.password); 
$('#cpassword').change(jVal.cpassword); 
$('#jform').submit(function(){ 
    $.each(jVal,function(i,v){ 
     $.isFunction(v) && v() 
    }) 
    return false // fix this when the code works. 
}) 

}）;

Answer 1

除了現有的事件處理程序，你可以不喜歡

$('#username,#email,#password,#cpassword').change(function() { 
    jVal.errors = false; 
    $.each(jVal, function(i, validator) { 
     if ($.isFunction(validator)) { validator(); } 
    }); 
    $('#register_submit').prop('disabled', jVal.errors); 
}); 

但是請注意，你可能希望你的提交處理檢查提交按鈕是否被禁用（和return false如果是，所以表單不提交），而不是自己再次進行驗證。這樣所有的驗證都發生在同一個地方。

（當然，只是所以它說，沒有這避免了在服務器端的數據的適當的驗證需要。）