0

我已经成功地为我的注册页面实现了实时表单验证，这一切都很好，除了我希望表单禁用提交按钮，直到所有输入都正确并且用户选中了两个复选框（条款和条件和隐私政策）。我试过尝试一下，但我以前从未做过，所以不确定从哪里开始，我问了几个人，显然这与下面 javascript 底部的 return 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.
})

});

4

1 回答 1

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如果是，则表单不会提交），而不是自己再次进行验证。这样，所有验证都在同一个地方进行。

（当然，正如人们所说的那样，这一切都不能消除对服务器端数据进行适当验证的需要。）

于 2012-05-06T18:06:33.997 回答