すべての入力が正しくなるまで送信ボタンを無効にする

Question

私は登録ページのリアルタイムフォームの検証を成功裏に実行できましたが、すべての入力が正しい時点まで送信ボタンを無効にしたいユーザーは2つのチェックボックス（利用規約とプライバシーポリシー）を確認しました。私はそれを行ってみましたが、私は前にそれをやったことがないので、どこから始めたらいいですか、私はいくつかの人に尋ねました。そして明らかに、下のJavaScriptの一番下にあるfalseを返します。どんな助けも大いに大いに評価されるでしょう。おかげ

HTMLのFORM

<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をsubmitボタンが無効になっているかどうかをチェック（としたいことがあり、フォームは送信されません）。そうすれば、すべての検証は同じ場所から行われます。 （もちろん、それは言われていますので、ただ、これのどれも、サーバー側のデータの適切な検証の必要性を除去しない。）