Validation error messages are not shown in the controlpanel

[wesleybl]

Describe the bug
Validation error messages are not shown in any controlpanel. Either in those already existing in Plone or in new ones, added by products.

Response json example, when validation error occurs:

{
  "message": "Twitter username should not include the \"@\" prefix character.",
  "traceback": [
    "File \"/home/user/.buildout/eggs/cp310/Zope-5.8.3-py3.10.egg/ZPublisher/WSGIPublisher.py\", line 181, in transaction_pubevents",
    "    yield",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/Zope-5.8.3-py3.10.egg/ZPublisher/WSGIPublisher.py\", line 390, in publish_module",
    "    response = _publish(request, new_mod_info)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/Zope-5.8.3-py3.10.egg/ZPublisher/WSGIPublisher.py\", line 285, in publish",
    "    result = mapply(obj,",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/Zope-5.8.3-py3.10.egg/ZPublisher/mapply.py\", line 85, in mapply",
    "    return debug(object, args, context)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/Zope-5.8.3-py3.10.egg/ZPublisher/WSGIPublisher.py\", line 68, in call_object",
    "    return obj(*args)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.rest-3.0.0-py3.10.egg/plone/rest/service.py\", line 22, in __call__",
    "    return self.render()",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.restapi-8.40.0-py3.10.egg/plone/restapi/services/__init__.py\", line 19, in render",
    "    content = self.reply()",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.restapi-8.40.0-py3.10.egg/plone/restapi/services/controlpanels/update.py\", line 41, in reply",
    "    deserializer()  # The deserializer knows where to put it.",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.restapi-8.40.0-py3.10.egg/plone/restapi/deserializer/controlpanels/__init__.py\", line 59, in __call__",
    "    value = deserializer(data[name])",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.restapi-8.40.0-py3.10.egg/plone/restapi/deserializer/dxfields.py\", line 51, in __call__",
    "    value = IFromUnicode(self.field).fromUnicode(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/zope.schema-7.0.1-py3.10.egg/zope/schema/_bootstrapfields.py\", line 556, in fromUnicode",
    "    self.validate(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/zope.schema-7.0.1-py3.10.egg/zope/schema/_bootstrapfields.py\", line 295, in validate",
    "    self._validate(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/zope.schema-7.0.1-py3.10.egg/zope/schema/_field.py\", line 211, in _validate",
    "    super(ASCII, self)._validate(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/zope.schema-7.0.1-py3.10.egg/zope/schema/_bootstrapfields.py\", line 510, in _validate",
    "    super(MinMaxLen, self)._validate(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/zope.schema-7.0.1-py3.10.egg/zope/schema/_bootstrapfields.py\", line 349, in _validate",
    "    constraint = self.constraint(value)",
    "",
    "  File \"/home/user/.buildout/eggs/cp310/plone.base-1.1.3-py3.10.egg/plone/base/interfaces/controlpanel.py\", line 1632, in validate_twitter_username",
    "    raise Invalid('Twitter username should not include the \"@\" prefix character.')"
  ],
  "type": "Invalid"
}

To Reproduce
Steps to reproduce the behavior:

1. Go to Site Setup -> Social Media
2. Fill in the Twitter username field with @test
3. Click in Save
4. No validation error message is displayed, although Twitter username cannot start with @

Expected behavior
Validation error message appears.

Screenshots

Software (please complete the following information):

Volto 17.0.1
Plone 6.0.7
plone.restapi 8.43.1
CMF 3.2
Zope 5.8.5
Python 3.11.1 (main, Dec 7 2022, 01:11:34) [GCC 11.3.0]
PIL 9.5.0 (Pillow)

[avengsum]

@wesleybl I couldn't find where this code lies can you help me

[wesleybl]

@avengsum the controlpanels form is here:

volto/src/components/manage/Controlpanels/Controlpanel.jsx

Line 159 in 6d5ac5f

<Form

We would have to do something similar to what is done in the content editing form:

volto/src/components/manage/Edit/Edit.jsx

Line 283 in 6d5ac5f

requestError={this.state.error}

It would be fantastic if you could fix this!

[abhinaisai2002]

How can we show the error messages like showing on a seperate modal or under the input itself

[wesleybl]

@abhinaisai2002 If we are going to follow the way the content editing form does, we should show a modal at the end of the page. See:

But it would be great to show the error in the field itself. But perhaps for this, it would be necessary to change the backend, to say in which field the error was.

But if we have the modal, it would be a step forward.

[davisagli]

Don't use that toast message as an example, the backend is serializing validation errors incorrectly so they are not shown next to the field like they are supposed to be.

[wesleybl]

Don't use that toast message as an example, the backend is serializing validation errors incorrectly so they are not shown next to the field like they are supposed to be.

@davisagli yes. But the controlpanel endpoint serializes in the same way. See the example in the issue description. So, for a fix without changing the backend, it would have to be the same way.

[wesleybl]

@avengsum @abhinaisai2002 would you be interested in fix this?