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:
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.
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
|
1 2 3 4 5 6 |
first__required_error: 'Please enter a first name' last__required_error: 'Please enter a last name' title__required_error: 'Please enter a title' middle__required_error: 'Please enter a middle name' suffix__required_error: 'Please enter a suffix' degree__required_error: 'Please enter a degree' |
|
1 2 3 4 5 6 |
address__required_error: 'Please provide a street' address_2__required_error: 'Please provide a street' city__required_error: 'Please provide a city' state_province__required_error: 'Please provide a state / province' postal_code__required_error: 'Please provide a zip code' country__required_error: 'Please provide a country' |
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).