woocommerce order form is getting submitted even if validation fails

Question

I have implemented validation for date of birth on woocommerce checkout page https://dev.clipcertification.com/checkout/

if user enters date more than 31 and month greater than 12 in Birthdate field, on keypress, message comes 'Please enter valid date (dd-mm-yyyy)', it is working fine uptil here, but after filling form , order gets placed, even if validation message is still there.

I have used following code:

<script>

jQuery(document).ready(function(){

jQuery.validator.addMethod(
    "dateUS",
    function(value, element) {
        var check = false;
        var re = /^\d{1,2}\-\d{1,2}\-\d{4}$/;
        if( re.test(value)){
            var adata = value.split('-');
            var dd = parseInt(adata[0],10); // was gg (giorno / day)
            var mm = parseInt(adata[1],10); // was mm (mese / month)
            var yyyy = parseInt(adata[2],10); // was aaaa (anno / year)
            var xdata = new Date(yyyy,mm-1,dd);
            if ( ( xdata.getFullYear() == yyyy )  && ( xdata.getDate() == dd ) && ( xdata.getMonth () == mm - 1 ) )
                check = true;
            else
               check = false;
        } 
        else
         check = false;

        return this.optional(element) || check;

    }, 
    "Please enter a valid date (dd-mm-yyyy)"
);

// attach Validate plugin to form
jQuery(".checkout").validate();

});
</script>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="https://dev.clipcertification.com/checkout/" enctype="multipart/form-data" novalidate="novalidate">

<!--- other fields-->
<input type="text" class="input-text  dateUS error" name="billing_dateofbirth" id="billing_dateofbirth" placeholder="Birthdate * (dd-mm-yyyy)" value="02-55-1285" maxlength="10" aria-invalid="true">

<!--- other fields-->

<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">

Cedric Cedric · Accepted Answer · 2018-01-25T09:11:04

The submit of the form will not be prevented by javascript in this case. So instead of having a submit button, have a instead - get the click event, if all fields are correctly filled up as required, either :

document.getElementById("myForm").submit();

or

#place_order{visibility: hidden; } /*css*/

$('#place_order').click();

Note :

In the future, prefer using

<input type="datetime-local">

but it's not yet supported for every major browsers

datetime-local documentation

woocommerce order form is getting submitted even if validation fails

1 Answers