In this guide you will learn how to validate WooCommerce checkout fields with the Flexible Checkout Fields plugin and create your own custom validation rules for core WooCommerce or custom fields.
Built-in Validation Rules
Validation rules available in Flexible Checkout Fields:
- Default - default validation, if WooCommerce sets a validation for the core field it will be used, if there is no validation by WooCommerce, no validation checks will be made.
- None - disable validation.
- Email - email validation.
- Phone - phone validation.
- Post code - post code validation, works only when the country field is enabled and uses country specific validation rules.
For email, phone and post code validation Flexible Checkout Fields utilizes the core WooCommerce functions. If they are not enough for your needs, you can create your own custom validation rules for every field.
Custom Validation Rules
If you are familiar with hooks you will find this Flexible Checkout Fields feature great. We developed the ability to create your own custom validation rules for the checkout fields.
How it works?
- Create your custom validation method (using the examples below). In this example we'll use the URL method.
- Add the validation function to your functions.php.
- Go to Flexible Checkout Fields settings and open the Validation select.
- Apart from the built-in validation rules, you will also see your custom rules: Number, URL, Length.
- Add a Website field and choose URL validation method.
- Go to WooCommerce checkout, enter an invalid URL in the field and place the order.
- The validation error will appear the you won't be able to place the order until you enter a valid URL:
How to Create Custom Validation Rules?
To create custom validation methods use the filter:
To explain how to validate WooCommerce checkout fields with custom validation rules we'll use the URL example that you'll find below.
Step 1 - Create a function to validate the URL
First of all, we will need a function to actually validate the URL and display the validation error. It will be called
To validate the entered value, we'll use the PHP
Then if the URL is not valid we will use the core WooCommerce function
wc_add_notice to display the validation error: [Field label] is not a valid URL.
Step 2 - Use the filter to add a new validation method to Flexible Checkout Fields
We'll use the
flexible_checkout_fields_custom_validation filter to add a new validation method to Flexible Checkout Fields. It will be a function
In this function we create a meta name for the custom validation:
$custom_validation['url'] - it is very important to keep this unique if you add multiple validation methods.
Next we create a name visible in the settings:
'label' => 'URL'.
Finally, we add a callback to the previously created validation function:
'callback' => 'wpdesk_fcf_validate_url'. It is very important part and the function name has to exactly the same as we created in step 1.
Step 3 - Go to Flexible Checkout Fields settings and select the newly created validation method.
You will find the full code for URL validation below.
Ready to use Custom Validation Examples
Below we prepared some examples to get you started.
Confirm email address field
You can add field for email address confirmation. It will compare field value with other field (in this case email field).
If field should be compared with other field, just change this code:
$fcf_validation_confirm_field = new WPDesk_FCF_Validation_Confirm_Field( 'billing_email' );
billing_email to you field, ie.
You can also customize error notice, by changing the following code:
wc_add_notice( sprintf( __( 'Invalid %1$s value.', 'wpdesk' )
'Invalid %1$s value.' to your custom message.
To validate if the customer entered a valid number, use the following code:
Website (URL) Validation
To check if the customer entered a valid website URL, use the following code:
Minimum/Maximum Character Limit Validation
The following example lets you check if the text entered by the customer is between 3 and 20 characters. If not he will see a validation error and will have to enter a valid character limit.
This example is a little bit more complicated and you can edit the minimum and maximum character limit:
- Minimum character limit, change the
3to a desired value, i.e.
- Maximum character limit, change the
20to a desired value, i.e.