Setting upper limit of checkbox selection

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 its add_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 a maxitems rule, the field, threshold and error properties must be specified.
  • The field property refers to the target field name. In this example, it is your-penguins.
  • The threshold property means the maximum number of items you can select at a time. It is 3 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?

Screenshot of the checkboxes. Four options are selected, and "Too many penguins!" error message appears at the bottom.
Screenshot of the checkboxes.

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!"
}