php - 在 WooCommerce 结帐的字段下显示无效电子邮件地址的错误

Question

以下代码片段在结帐时在空必填字段下方显示错误：

add_filter( 'woocommerce_form_field', 'checkout_empty_field_errors', 10, 4 );
 
function checkout_empty_field_errors( $field, $key, $args, $value ) {
   if ( strpos( $field, '</label>' ) !== false && $args['required'] ) {
      $error = '<span class="error" style="display:none">';
      $error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );
      $error .= '</span>';
      $field = substr_replace( $field, $error, strpos( $field, '</span>' ), 0);
   }
   return $field;
}

是否可以为无效的电子邮件地址显示类似的错误？

标签： phpwordpresswoocommerce

Answer 1

WooCommerce 已检查文件中电子邮件的有效性：/woocommerce/assets/js/frontend/checkout.js.

woocommerce-validated如果电子邮件正确，它将添加课程。而woocommerce-invalid-email类如果电子邮件无效。

您可以使用 jQuery 脚本检查是否#billing_email_field有woocommerce-invalid-email该类并在电子邮件字段下方添加错误，如下所示：

// adds an error under the email field if the email is invalid
add_action( 'wp_footer', 'add_error_for_billing_email_field' );
function add_error_for_billing_email_field() {
   ?>
   <script type="text/javascript">
   jQuery(function($){
      $('form.checkout').on('change', '#billing_email_field', function(){
         if ( $(this).hasClass("woocommerce-invalid-email") ) {
            if ( $('.invalid_email_error').length < 1 ) {
               $('<span class="invalid_email_error" style="display:block">The email is invalid.</span>').insertAfter('#billing_email');
            }
         } else {
            $('.invalid_email_error').remove();
         }
      });
   });
   </script>
   <?php
}

当电子邮件无效时：

---

当电子邮件有效时：

---