javascript - JQuery:即使验证返回 false，我的表单仍在提交

Question

我有一个使用 JQuery Validator 的表单。如果未选中 2 个复选框，我将显示错误并且不应提交表单。但我发现它无论如何都会提交，即使我的代码返回 false。这是我的 HTML 代码的一部分:

 <form id="addressForm" name="addressForm" method="post">
     <div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
         <div class="checkbox-inline">
              <label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
              <@spring.bind "shippingAddressForm.awtTermsAccepted"/>
              <input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
               <span class="checkmark"></span>
              </label>
         </div>
         <div class="checkbox-inline" style="margin-left:0;">
             <label class="checkboxContainer">I have read and agree to the <a href="https://academicwriter.apa.org/about/terms" target="_blank">Academic Writer Terms of Service</a>
                <@spring.bind "shippingAddressForm.apaTermsAccepted"/>
                <input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
                <span class="checkmark"></span>
            </label>
         </div>
         <div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
     </div><!-- /.alertBox -->
     <div class="col-md-6 col-md-push-6">
            <div class="alignRightThen100Width"><button onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment &amp; Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
     </div>
</form>

这是 JS:

function beforeAddressPageSubmit(){
    if(showBillingAddress){
        removeState('Billing');
    }
}

function submitAddressForm() {
    var validator = jQuery("#addressForm").validate();
    var isValid = validator.form() && awtTermsAgreeCheckbox();
    if (isValid) {
        beforeAddressPageSubmit();
        jQuery("#addressForm").submit();
    }
}

我是不是做错了什么？

Answer 1

您需要将 type="button" 添加到按钮标签。

function beforeAddressPageSubmit(){
    if(showBillingAddress){
        removeState('Billing');
    }
}

function submitAddressForm() {
    var validator = jQuery("#addressForm").validate();
    var isValid = validator.form() && awtTermsAgreeCheckbox();
    if (isValid) {
        beforeAddressPageSubmit();
        jQuery("#addressForm").submit();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addressForm" name="addressForm" method="post">
     <div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
         <div class="checkbox-inline">
              <label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
              <@spring.bind "shippingAddressForm.awtTermsAccepted"/>
              <input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
               <span class="checkmark"></span>
              </label>
         </div>
         <div class="checkbox-inline" style="margin-left:0;">
             <label class="checkboxContainer">I have read and agree to the <a href="https://academicwriter.apa.org/about/terms" target="_blank">Academic Writer Terms of Service</a>
                <@spring.bind "shippingAddressForm.apaTermsAccepted"/>
                <input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
                <span class="checkmark"></span>
            </label>
         </div>
         <div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
     </div><!-- /.alertBox -->
     <div class="col-md-6 col-md-push-6">
            <div class="alignRightThen100Width"><button type="button" onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment &amp; Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
     </div>
</form>