Posts in the developer's cookbook category describe topics that require technical knowledge. Be warned and use the techniques at your own risk. Unless you are an experienced developer, you are strongly advised to ask a professional for support.
In this recipe, I’ll show you how to implement a user input validation that sets the upper limit of checkbox selection. This validation is based on the Schema-Woven Validation (SWV) mechanism, so it has some big advantages over the previous filter-based validation, such as:
- You can use validation rules already defined by SWV, so you don’t need to code the validation logic yourself.
- Once you create an SWV validation rule, the rule can work anywhere as long as SWV is supported. On the other hand, filter-based validation only works on the server side.
OK, let’s get started.
First, suppose you have a group of checkboxes to select penguins in your form (Why penguins? It’s just an example. Don’t take things too seriously 🙂 ):
[checkbox your-penguins "Adélie penguin" "Emperor penguin" "Gentoo penguin" "Little penguin" "Humboldt penguin" "Southern rockhopper penguin" "Galapagos penguin"]
As you can see in the form-tag, your-penguins
is the field name, and it has seven options of penguin species.
Let’s make it allow a selection of up to three options at a time and show a validation error when you select more than three. Using the predefined maxitems
rule type, you can simply implement this validation. See the following PHP code snippet:
add_action(
'wpcf7_swv_create_schema',
function ( $schema, $contact_form ) {
$schema->add_rule(
wpcf7_swv_create_rule( 'maxitems', array(
'field' => 'your-penguins',
'threshold' => 3,
'error' => "Too many penguins!",
) )
);
},
10, 2
);
In this coding, it’s important to note the following points:
- You use the
wpcf7_swv_create_schema
action hook to add SWV rules. - The first parameter passed to the action callback function (
$schema
) is a schema object. Calling itsadd_rule()
method can add a rule to the schema. - The
wpcf7_swv_create_rule()
function creates a rule. The first parameter must be one of the predefined rule types. In this example,maxitems
is used. - The second parameter passed to
wpcf7_swv_create_rule()
is an associative array that represents properties of the rule. For amaxitems
rule, thefield
,threshold
anderror
properties must be specified. - The
field
property refers to the target field name. In this example, it isyour-penguins
. - The
threshold
property means the maximum number of items you can select at a time. It is3
in this example. - The
error
property is the validation error message that will display when this rule’s request is unsatisfied.
That’s all. With these ten lines of code, you can implement a complete user input validation that works both on server-side and client-side. Pretty simple, right?
To confirm it, try sending an HTTP GET request like the following:
GET {site URL}/wp-json/contact-form-7/v1/contact-forms/{contact form ID}/feedback/schema
If it’s working correctly, you’ll find the rule you’ve added in the response:
{
"rule": "maxitems",
"field": "your-penguins",
"threshold": 3,
"error": "Too many penguins!"
}