How form validation works in WC Vendors Pro

When a vendor fills in the product form, you want them to catch a bad value before they submit, not after. WC Vendors Pro checks every field when the vendor submits the form, so a bad value is caught before the product is saved. This article explains how that validation works and how to add your own rules and messages to it.

Prerequisites

  • WC Vendors Pro 1.5.0 or later. This release replaced the previous validation system.
  • Custom form validation written for the older system still works. A built-in translator handles it, and an error log notice tells you to move it to the current system.

All validation rules and messages are handled via the form fields ‘custom_attributes’. To override or add validation rules you will need to find the fields filter name, located in the source code, and then add the values you require.

Validation is run on every field before the form is submitted so your users will know instantly if they have entered an incorrect value.

Product name field highlighted in red with an inline validation message
An inline validation message on the product form

Make a field required

To make a field required all you have to do is set the HTML 5 required attribute on the field and it will become required. The following example shows how to make the SKU field required.

// Add this to your themes functions.php 
add_filter( 'wcv_product_sku', 'wcv_product_sku' );
function wcv_product_sku( $field ){
	$field[ 'custom_attributes' ] = array( 'required' => "", 'data-parsley-error-message' => 'SKU is required' );
	return $field;
}

Set a custom error message

To add a custom error message you can use the new data value ‘data-parsley-error-message’. As you can see in the SKU example above this will output a new error message. By default, you will get a generic error message. This is only required if you would like to give your users more context for the error.

Available validation rules

There are many different validation rules available with Parsley and you can find them in the Parsley documentation below.

Read the full Parsley JS documentation here. 

Need help?

If you have a question or run into any issues, we are here to help.

Was this article helpful?

Related Articles

Complete Your Purchase