Question

默认情况下，Woocommerce会在结帐页面模糊后立即验证字段。因此，如果有人错误地点击某个字段然后点击了该字段，即使没有提交任何内容，该字段也会显示为“无效”。我们发现这种烦人并且可能给用户带来压力。

我们想要做的是更改验证，这样只有在点击“下订单”按钮（或表格一般提交）时才会启用。但是，我们不能完全删除checkout.min.js，因为我们可能希望保留其他与字段验证无关的脚本。

我尝试过这种hacky方法来删除默认验证： jQuery(document.body).on('init_checkout', function (event) { setTimeout(function () { jQuery('.validate-required').removeClass('validate-required woocommerce-invalid woocommerce-invalid-required-field'); }, 1000); });

虽然这可以防止字段在模糊时变为红色，但页面仍会滚动到顶部并在单击“下订单”时显示错误，因此验证必须有其他内容。错误顶部仅指信用卡字段，但是......我们正在使用Woocommerce Authorize.NET AIM插件，因此可能与它有关。

有没有人做过类似的事情并且运气好吗？

Answer 1

好的，我想出了一个非常好的方法，以备将来参考。

首先，将{WooCommerce javascript文件夹中的checkout.js复制到主题的js文件夹中。

然后将其添加到您的主题functions.php，取消注册默认脚本并将其替换为您的自定义版本：

add_action( 'wp_enqueue_scripts', 'kg_replace_wc_scripts', 99 );
function kg_replace_wc_scripts(){
    if( is_checkout() ){
        $path = get_template_directory_uri() . '/js/checkout.js';
        $time = filemtime($path);
        wp_deregister_script('wc-checkout');
        wp_register_script('wc-checkout', $path, 
        array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ), $time, TRUE);
        wp_enqueue_script('wc-checkout');
    }
}

（可选择使用WC版本作为版本字符串，但我喜欢使用filemtime，因此每次修改文件时，它都会在实时网站上更新而不需要清除缓存）

然后在新的checkout.js中，注释掉或删除此行（此版本中的第35行）：

this.$checkout_form.on( 'input blur change', '.input-text, select, input:checkbox', this.validate_field );

这将为用户提供一个休息时间，并在他们完成填写之前让字段不进行验证。

现在您需要向wc_checkout_form添加一个新功能，以便立即处理所有字段的验证，这是我的：

validate_all_fields: function() {
            var any_invalid = false;
            var ship_to_diff = $('#ship-to-different-address input').is(':checked');

            $('.kg-invalid-msg').fadeOut(500, function() {
                $(this).remove();
            });

            $('.woocommerce-invalid').removeClass('woocommerce-invalid woocommerce-invalid-required-field');

            $('.validate-required').each(function() {
                var $this             = $(this).find('input[type=checkbox],select,.input-text'),
                    $parent           = $this.closest( '.form-row' ),
                    validated         = true,
                    validate_required = $parent.is( '.validate-required' ),
                    validate_email    = $parent.is( '.validate-email' );

                if (!ship_to_diff && $this.parents('.woocommerce-shipping-fields').length) {
                    return true;
                }

                if ( validate_required ) {
                    if ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) {
                        $parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
                        validated = false;
                        any_invalid = true;
                    } else if ( $this.val() === '' ) {
                        $parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
                        validated = false;
                        any_invalid = true;
                    }
                }

                if ( validate_email ) {
                    if ( $this.val() ) {
                        /* https://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
                        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

                        if ( ! pattern.test( $this.val()  ) ) {
                            $parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
                            validated = false;
                            any_invalid = true;
                        }
                    }
                }

                if ( validated ) {
                    $parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email' ).addClass( 'woocommerce-validated' );
                }
            });

            if (any_invalid) {
                // Scroll to first invalid input
                var $first_invalid = $('.woocommerce-invalid:first');

                var $msg = $('<div class="kg-invalid-msg">Please check your info</div>').appendTo($first_invalid);
                $('html,body').animate({
                    scrollTop: $first_invalid.offset().top - 70
                }, 1000);

                $first_invalid.find('input,select').on('input change', function() {
                    $msg.fadeOut(500, function() {
                        $msg.remove();
                    });
                });

                $('.woocommerce-invalid').find('input,select').on('input change', function() {
                    $(this).closest('.form-row').removeClass('woocommerce-invalid woocommerce-invalid-required-field');
                });
            }
        }

当表单无法验证时，这将滚动到第一个无效输入（而不是一直到顶部），并在将所有无效输入着色为红色时向第一个无效输入添加注释。你可以很容易地修改它，使它按照你想要的方式工作。

最后，您只需在提交时触发此功能，方法是将此行添加到submit的{{1}}函数中：

wc_checkout_form

现在，结帐字段将让您独自一人，直到您点击＆＃34;下订单＆＃34;然后验证将启动。

Answer 2

对于其他有相同问题的人，我无需编辑checkout.js就可以解决此问题：

隐藏错误，直到出现showErrors类：

.woocommerce form .form-row.woocommerce-invalid:not(.showErrors) .select2-container, 
.woocommerce form .form-row.woocommerce-invalid:not(.showErrors) input.input-text, 
.woocommerce form .form-row.woocommerce-invalid:not(.showErrors) select {
    border: 1px solid #FFF !important;
}

然后在结帐错误中添加showErrors：

$(document.body).on('checkout_error', function () {
    $('.woocommerce-invalid-required-field').addClass('showErrors');
  });

Woocommerce：绕过并替换结帐表单验证的任何方式？

2 个答案: