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 CODE

$(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，因此表单不会提交），而不是再次进行验证。这样所有验证都发生在同一个地方。

（当然，正如所说的那样，这些都不会消除在服务器端正确验证数据的需要。）

禁用提交按钮，直到所有输入都正确

1 个答案: