签出必填字段的自定义错误

Question

Woocommerce的必填字段在结账页面上的默认错误是：

我想定制错误消息，以便每条消息都显示在其字段的上方：

​

我该如何定制结账页面呢？

我需要截取错误消息，并显示我自己的错误消息。应该不会太难，但我有点困难。结帐页面的主模板是woocommerce/checkout/form-checkout.php。

Answer 1

    $(".BILLING SUBMIT BUTTON CLASS").click(function(e){
     $(document).ajaxComplete(function(){
            inputss =  $(".woocommerce-invalid input");
            jQuery('.form-row').removeClass('field--error');
            jQuery('.form-row p.field__message').remove();

            $.each(inputss, function(xn, it){

                var fieldName= jQuery(it).attr('name');
                //console.log(fieldName);
                switch(fieldName) {
                    case 'billing_email':
                       jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-email">Please enter a valid email address</p>');
                    break;
                    case 'billing_first_name':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-first_name">Please enter your first name</p>');
                    break;
                    case 'billing_last_name':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-last_name">Please enter your last name</p>');
                    break;
                     case 'billing_address_1':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-address1">Please enter your address</p>');
                    break;
                     case 'billing_city':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-city">Please enter your city</p>');
                    break;

                    default:
                        //code block
                }


            });
        });

 }

向error类添加一些样式。

.field--error .field__message--error {
 display: block;
 }
.field__message--error {
  display: none;
  line-height: 1.3em;
   margin: 0.75em 0 0.25em;
  color: #ff6d6d;
 }
.field__message {
  font-size: 0.85714em;
 }