Can a custom validation error be added for Custom Component? If yes, can we prevent user from publishing if the field does not have required format?

Technical Questions
, , , ,
1

I have a custom component with a field of type ‘List’.
If user does not add any entry in the list, I want to add a custom error message to user to mention at least one entry is required.

I also want to know if we can prevent the user from publishing the section if the above validation is not met? (in my case the custom component is being used in a section model)

Please let me know how I can achieve this.

2

Hi @olivela,

Please see this forum post, which demonstrates how to add an OnChange to your custom component’s JSON to run validation.

For example, you might write something like the following, where “MY_LIST” is the name of your list field:

onChange: (options) => {
        if (options.get('MY_LIST').length == 0) {
          alert('MY_LIST must have at least one entry!');
        }
      }

Thanks,
~Logan from Builder.io

1 Like
3

Hi Logan,

Thanks for your reply. This helps.
I would also like to know the following:

  1. Instead of adding an alert message, is it possible to add this error message in the custom field section on the front end itself?
  2. Is it possible to prevent the user from publishing the section entry for this case?
4

Hey @olivela,

Please feel free to add these ideas to a feature request here: Ideas, as they are not currently available.

Thank you!

5

Is there any update on this?

I have a similar situation - custom component input field with a default value. When I add required: true and clear the input in the Builder editor, the field correctly shows an error message. However, when I click out of the input field, with it still blank, then the error message disappears and I am still able to publish my page. Is there any where to have the error message remain visible and block the user from publishing the page?

Thanks