Validation Feedback on the fly?

There is already a validation of the VAT number on the fly. When an invalid VAT number is entered, a script adds a CSS class to the VAT number field, which should highlight it as an “error” (see https://prnt.sc/q3tqzf). The script also triggers a couple of events after the validation, which you can intercept with a custom script to show a message, add an icon and so on. Examples below:

jQuery(document).on('wc_aelia_euva_eu_vat_number_validation_number_incomplete', function(event, vat_number, vat_country) {
  // Handle event triggered when the VAT number is incomplete (too short)
});

jQuery(document).on('wc_aelia_euva_eu_vat_number_validation_complete', function(event, response) {
  // Check if the VAT number is valid or not
  var vat_number_valid = response ? response.valid : false;
  // Do something (e.g. add CSS classes to the VAT number field)
  // depending on the validation result
});

With the above, you can customise the checkout as you like, adding messages, icons or styles to make the VAT number field more prominent after a validation.

Hi,

thanks for this hint.

I have added a red cross, comparable with the grey checkmarks in the address fields:

.woocommerce form #vat_number_field.form-row.validate-required.woocommerce-validated.woocommerce-invalid input.input-text,
.woocommerce-page form #vat_number_field.form-row.validate-required.woocommerce-validated.woocommerce-invalid input.input-text {
    background-image: url(img/invalid_red.png);
    background-position: 95% center;
    background-repeat: no-repeat;
}

This works fine.

But when trying to visualize a correct VAT number, the green checkmark is always visible. Because other than the address validation from WooCommerce with grey checkmarks, the CSS class “woocommerce-validated” is always in <p id="vat_number_field">.
Shouldn’t this CSS class only be added to the element, when the VAT was validated (independent of the result)?

Class woocommerce-validated is added by WooCommerce for field that are valid based on WooCommerce’s internal logic. That class is added by WooCommerce against the checkout fields when something changes at checkout.

Based on an inscpection, the meaning of the woocommerce-validated class is to indicate the fields that are valid (not just went through the validation) from WooCommerce’s perspective. The class is added when any of the following conditions is satisfied:
– The field parent doesn’t have a validate-required class.
– The field is a checkbox and it’s ticked.
– The field is an input and it’s not empty.
– The field is an email input and it contains a valid email address.

This is done by WooCommerce, automatically and independently from any validation performed by our plugin.

The EU VAT Assistant doesn’t add or remove the woocommerce-validated class, nor it uses it to style its fields. Due to that, I wouldn’t recommend to rely on it to style the VAT number field after the validation. Instead, I would suggest to use the events I described to add your own custom class and style the field accordingly.

Hi @daigo75,

I am having some troubles with your if/else shorthand, my JS knowledge is VERY limited ??
I have been searching for 2 hours now with no success.

var vat_number_valid = response ? response.valid : false;
means vat_number_valid will be either “false” or “0”.
so I used
if( vat_number_valid === false ) {
to add a notice after the input field (actually, after the vat_number-description element, otherwise validation seems to fail – do they need to stay linked?)
jQuery("#vat_number-description").after( "<span class='btw-validation-error-message'>BTW-nummer niet geldig</span>" );

But although console.log(vat_number_valid); tells me “true”, the VAT not valid notification still shows.

Customisations are outside the scope of the support service, unfortunately we can’t debug or write the code for you. However, I can make a hypothesis about the cause of the issue. Your code should not just display the “invalid number” error when the number is not valid, but also hide the error message when the number is valid. Without that step, once you show the message it will be visible forever, even after entering a valid VAT number.

Note
The initial premise is incorrect. Variable vat_number_valid is either true or false, not zero.

I totally understand your point of view on the support scope and I had already figured that one out myself, so I had already added a remove(); like

  if( vat_number_valid === false ) {
  	jQuery(".btw-validation-error-message").remove();
  	jQuery("#vat_number-description").after( "<span class='btw-validation-error-message'>BTW-nummer niet geldig</span>" );
  }

But I should have put that outside the if-clause.

Yes, the “remove” should be before the if. That is:
1. Remove the message (if present).
2. Show the message if needed.

This way, a valid VAT number would not cause the error message to appear.