BugWP logo BugWP
Back to Community
Home / Community / Plugin → Meta box

How to Add Frontend Form Validation with Regex in Meta Box

25 threads Sep 7, 2025 Plugin → Meta box

Content

Adding custom validation to your frontend forms is a common requirement for WordPress developers using the Meta Box plugin. A frequent question is how to implement regex (regular expression) validation to ensure users input data in a specific format, such as a custom product code or a specialized identifier.

This guide explains why the standard approach might not work as expected and provides the correct method for implementing robust regex validation on your frontend forms.

The Common Misconception: Using the 'regex' Parameter

Many developers intuitively look for a 'regex' parameter when defining their Meta Box fields, based on patterns from other plugins or frameworks. An implementation might look like this:

array(
   'name' => 'Product Code',
   'id' => $prefix . 'product_code',
   'type' => 'text',
   'required'  => true,
   'regex'   => '[1-9][a-d]', // This parameter does not exist
),

This code will not work because Meta Box does not have a built-in 'regex' parameter for validation. The field will be created, but the regex validation will be completely ignored, leaving your form without the intended client-side checks.

The Correct Solution: Using the HTML5 'pattern' Attribute

Meta Box supports adding custom HTML5 attributes to field inputs. The correct way to implement regex validation is by using the standard HTML5 pattern attribute. This attribute is natively supported by modern browsers and will trigger validation messages on the frontend.

Here is the corrected field definition:

array(
   'name' => 'Product Code',
   'id' => $prefix . 'product_code',
   'type' => 'text',
   'pattern' => '[1-9][a-d]', // Use the 'pattern' attribute
   'required'  => true,
),

This will generate the following HTML, which includes the pattern attribute:

<input id="px_product_code" class="rwmb-text" type="text" name="px_product_code" pattern="[1-9][a-d]" required>

Why You Might Not See an Error Message

If you've implemented the pattern attribute correctly but still don't see an error message when invalid data is entered, the issue is often related to the custom styling of your WordPress theme or another plugin.

The browser's default validation message might be appearing but could be styled in a way that makes it difficult to see (e.g., a small tooltip) or could be being suppressed by other JavaScript on the page.

Testing and Best Practices

  • Test Your Regex: Always test your regular expression pattern in a tool like Regex101 before adding it to your code.
  • Provide a Title Attribute: For a better user experience, you can add a 'title' attribute to your field to explain the expected format. The browser will often display this text in the validation tooltip. 
    'title' => 'Please enter a code starting with a digit 1-9, followed by a letter a-d.'
  • Remember Server-Side Validation: Client-side validation is a usability feature, not a security measure. Always validate and sanitize all user-submitted data on the server-side as well within your theme's functions.php file.

By using the standard HTML5 pattern attribute, you can effectively add custom regex validation to your Meta Box frontend forms, ensuring data is entered in the correct format.

Related Support Threads Support