Development

Overriding “Required Message” on Composite Fields in Webform (Drupal 8)

The more commonly used fields in Webform (text, radios, etc.) offer the ability to set a custom Required message string. This is the text that shows in the error message when a required field is not filled.

Here’s what that screen looks like when you’re configuring a field on the Build screen:

Required message

There are several element types that do not provide a UI field to set this Required message value. The composite Name and Advanced Address field are two examples I encountered. For these fields you have to dig a little deeper, but it’s easy once you get the hang of it. Visit the Advanced tab for the field, then scroll to the bottom where you’ll see a Custom Settings fieldset. Within this you can use the Custom properties textarea to provide YML to override settings for the field. You can set the  required_error  property pretty simply.

YML example

Here’s how I’ve handled a few of these composite fields:

Name

  • I’m not using several of the sub-fields but I’ve included them here as an example
  • The easiest way to know what the subfield keys are is to use the “Set default value” button, which will spit out all of them
  • I have made the first and last sub-fields Required via the checkbox on the General tab for the field
[Basic] Address
Advanced Address

This may be related to the Address module… I’m still figuring this one out… check back soon.

 

NOTE: By default your browser will catch any unfilled required fields before Webform has a chance to validate them.

If you want to hand off all validation to webform you can check the checkbox on the individual Webform’s Settings > Form page.

This will add the novalidate attribute to the form.

NOTE 2: If you’re not using it, you should consider enabling the Inline Form Errors module (comes with D8 Core).

Leave a Reply

Your email address will not be published. Required fields are marked *