VAT Number Fields Becomes Red

The “red” is the style that WooCommerce applies to a field when the value in that field is not valid. In the case of the EU VAT Assistant, the VAT number field is validated every time its value changes, or whenever WooCommerce triggers the “address updated” event (i.e. when any “address” field changes). This is by design.

If the field appears as red on the checkout page, it means that the value is not valid. For example, if you configured the field to be required, or required for EU countries, it will appear as red when it’s left empty.
Since the validation logic can be triggered whenever the address changes, if the VAT number field is set as required, it can appear in red as soon as the customer enters some data that triggers that event. That can be considered as a “reminder” that the VAT number field should be filled.

To change this logic, you have two options:
1. Set the VAT number field as “optional” in the plugin settings. With the field set as optional, the validation will only run if the field has been populated, because it’s allowed to be empty.
2. If you wish to keep the field as “required”, you can change its styles via CSS, so that it remains unaltered. Example:

.woocommerce-checkout .woocommerce .aelia_wc_eu_vat_assistant input#vat_number {
    border-color: #c9c9c9 !important;
    background: #fcfcfc;
    border-radius: 3px;
}

Note: the VAT number validation logic will still run when the checkout process starts. If the VAT number is required, but empty at that point, the EU VAT Assistant will raise an error and stop the checkout.

Additional option
Starting from version 2.0.13.210316, due to be released soon, the EU VAT Assistant offers a filter that can be used to alter the parameters used by the frontend scripts. This can be used to have a “mixed” setup, where the frontend scripts treat the VAT number as optional, whereas the backend checks, which run upon the actual checkout, consider it required.

That filter could be implemented as follows:

add_filter('wc_aelia_euva_script_params', function($args) {
	// Set the VAT number field as "optional". This will prevent the frontend script
	// from marking it as "not valid" when it's left empty, e.g. after the customer
	// changes the billing or shipping country
	$args['vat_number_field_required'] = 'optional';
	return $args;
});

By setting argument vat_number_field_required to optional, the frontend script will ignore the case in which the field is left empty, but they will still try to validate it when a value is entered. The server logic, on the other hand, will still treat the VAT number field as “required”, stopping the checkout if the field has been left empty.

• This reply was modified 3 years, 8 months ago by Diego. Reason: Fixed ID of "VAT number required" argument
• This reply was modified 3 years, 8 months ago by Diego. Reason: Corrected ID of VAT number field in the filter description

Hello Diego,

thank you for your detailed answer.

I probably didn’t explain myself well, but the field was becoming red as soon as someone was clicking on the first name placeholder, for example. In my settings, I have the field set as “Required if customer enters a company name (EU only)” , but instead it was becoming red even if no company was added or if country was outside Europe.

Anyway, I updated the plugin last night and it seems like the issue is not there anymore.

Thank you.

Best,
Jessica

Thanks for the clarification. If the field is set to one of the “Required if customer enters a company name” options, then the frontend scripts should not try to validate the VAT number field, or flag it as invalid (red) when the company name field is empty, no matter what event is triggered.

That logic hasn’t changed in the latest update, therefore, if it didn’t work correctly before, it’s likely that the issue is still there. I will add a note to check that again, just to be sure. If there’s an error, we will fix it in the next update.

Hi Diego,

yes that’s exactly what happened.

Thanks, I’ll get back in touch if it happens again.

Best,
Jessica

• This reply was modified 3 years, 8 months ago by jessicalancia93.

@jessicalancia93 we reviewed the checkout page and found a possible reason for the glitch you described. If we got it right, it was a small typo, but sufficient to make the company field appear as “always filled”, thus triggering the validation of the VAT number field right away.

This has been fixed in version 2.0.14.210317, so that glitch should not happen again.

Hello Diego,

thanks a lot for checking and letting me know.

All the best,
Jessica