JQuery: My form is submitting even though validate returns false

Question

I have a form using JQuery Validator. If 2 checkboxes aren't checked, I display an error and the form shouldn't submit. But I'm finding that it submits anyway, even though my code returns false. Here's a portion of my HTML code:

 <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>

And here's the 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();
    }
}

Is there anything I'm doing wrong?

because you have a submit button and you are NOT returning false or cancelling the default action of the click — epascarello, Apr 22 '19 at 14:46

Hien Nguyen · Accepted Answer · 2019-04-22T14:49:01.650

You need add type="button" to your button tag.

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>

I don't understand the downvote either... But it does work! Can you tell me why adding `type=button` changed the behavior of the page? — CNDyson, Apr 22 '19 at 14:51
@user1660256 So by default the form gets submitted. That's need to be prevented as when there were errors, even browser didn't allow the form to be submitted to show you the error. This is new HTML5 feature. — Praveen Kumar Purushothaman, Apr 22 '19 at 14:52
Because default button is type="submit" so that change to "button" it will prevent default submit form — Hien Nguyen, Apr 22 '19 at 14:54
@user1660256 I would say this answer is right and it solves it. — Praveen Kumar Purushothaman, Apr 22 '19 at 14:55

JQuery: My form is submitting even though validate returns false

1 Answers1