Jquery.validation.js在WooCommerce结账页面表单中不起作用

时间:2018-09-01 作者:Raxit

jQuery("#woocommerce_checkout_form").validate({


     highlight: function(element) {
            (jQuery(element).parent()).parent().addClass("woocommerce-invalid");
            (jQuery(element).parent()).parent().removeClass("woocommerce-validated");
        },
    unhighlight: function(element) {
            (jQuery(element).parent()).parent().removeClass("woocommerce-invalid");
            (jQuery(element).parent()).parent().addClass("woocommerce-validated");
        },


    submitHandler: function(form) {
        jQuery.ajax({
                type: "POST",
                data:values,
                url: jQuery(form).attr(\'action\'),
                success: function(data){
                    //alert(\'ajax load\');
                    //window.location.href = "http://demo7.web.dev1.bl/wp-content/plugins/woocommerce/templates/checkout/checkout.php";
                }
            });

            return true;

        //jQuery(form).ajaxSubmit();
    },
     rules: {

        billing_phone: {
            required: true,
            minlength:10,
            maxlength:10,
            number: true,
        },

        billing_postcode: {
            required: true,
            minlength:6,
            maxlength:6,
            number: true
        },

        shipping_postcode: {
            required: true,
            minlength:6,
            maxlength:6,
            number: true
        }
    },

    messages: {        
    billing_phone: {
        required: "Enter Phone Number", 
        minlength:"Please 10 Digit Phone Number",
        maxlength:"Please 10 Digit Phone Number",           
        number: "Please enter a valid quantity"
      },
      billing_postcode: {
        required: "Enter Valid Zipcode", 
        minlength:"Please enter six digits Zipcode",
        maxlength:"Please enter six digits Zipcode",           
        number: "Please enter a valid Zipcode"
      },

      shipping_postcode: {
        required: "Enter Valid Zipcode", 
        minlength:"Please enter six digits Zipcode",
        maxlength:"Please enter six digits Zipcode",           
        number: "Please enter a valid Zipcode"
      }

    }

});
这是我用来在zipcode和phone上添加额外验证的代码,但即使不匹配,也会将表单提交给payment。是否可以像默认验证wokrs一样,阻止表单提交并在出错后保持在签出页面上。

1 个回复
SO网友:Anton Momot

单击提交按钮阻止表单提交并强制验证

$(\'#place_order\').on(\'click\', function(event) {
    event.preventDefault();
    if ( $(\'form.checkout.woocommerce-checkout\').valid() ) {
        $(\'form.checkout.woocommerce-checkout\').submit();
    }
});

结束

相关推荐

将WordPress事件加载到完整日历jQuery中

我正在尝试将我的自定义帖子类型事件加载到jquery插件完整日历中,但没有任何效果。我用这段代码制作了一个php文件include \"wp-load.php\"; global $wpdb; header(\'Content-Type:application/json\'); $events = array(); $result = new WP_Query(\'post_type=events&posts_per_page=-1\'); foreach(