即使验证失败，也会提交 woocommerce 订单

Question

我已在 woocommerce 结帐页面上验证出生日期 https://dev.clipcertification.com/checkout/

如果用户在出生日期字段中输入大于 31 的日期和大于 12 的月份，则在按键时，会出现消息“请输入有效日期 (dd-mm-yyyy)”，它在此处工作正常，但在填写表格后，即使验证消息仍然存在，订单也会下达。

我使用了以下代码：

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

Answer 1

在这种情况下，javascript 不会阻止表单的提交。因此，不要使用提交按钮，而是使用 - 获取点击事件，如果所有字段都按要求正确填写，则：

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

或

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

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

注意：

以后更喜欢使用

<input type="datetime-local">

但尚未支持所有主流浏览器

datetime-local documentation