Question

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

如果用户在出生日期字段中输入超过31且月份大于12的日期，则在按键时，会显示消息，请输入有效日期（dd-mm-yyyy）＆＃39;，此处工作正常，但在填写表格后，即使验证消息仍然存在，也会下订单。

我使用了以下代码：

<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

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

1 个答案: