Possible bug?

[bwied]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

It seems like validation on the "Live Playground" is no longer working. Could you confirm whether or not you are experiencing the same thing?

[bwied]

It seems as though required field validation is the part that is not working. I apologize if this is something that changed with v5 that is covered in the documentation.

[nickgros]

@bwied which playground examples aren't behaving as expected? To fix #675 and #3424, we've changed how we instantiate formData, which could have broken validation for some of the examples. We'd probably want to fix the examples themselves.

[bwied]

@nickgros I was using the simple example and deleting either first name or last name and then clicking submit. It looks like #3424 already covers this issue though, so I'm sorry about that.

The other issue I was seeing is/was related to html5validation and the first invalid input control being out of view when clicking the submit button. This stackoverflow post seems to describe this behavior as more of a browser implementation feature/bug in which the act of scrolling immediately hides the displayed validation popup. I was seeing the same behavior in both Chrome and Edge.

[tyrdavis]

Seconding this. We're trying to migrate to v5 and required fields never produce validation errors. On the simple example in the playground, you can submit the form without either of the first name or last name fields filled, and neither will ever show an error. Switching to AJV6 validator makes no difference.

[heath-freenome]

@tyrdavis The reason the simple example validates is because there is an empty string being provided to the formData via the ui:emptyValue prop in the uiSchema so there will always be a valid string. If you remove the ui:emptyValue for say, lastName as shown in this modified simple example, you will see the required field validation occurs. Are you using the ui:emptyValue behavior?

[heath-freenome]

I am updating the simple example to at least make lastName fail the required field validation when nothing is provided.

[heath-freenome]

@nickgros I was using the simple example and deleting either first name or last name and then clicking submit. It looks like #3424 already covers this issue though, so I'm sorry about that.

The other issue I was seeing is/was related to html5validation and the first invalid input control being out of view when clicking the submit button. This stackoverflow post seems to describe this behavior as more of a browser implementation feature/bug in which the act of scrolling immediately hides the displayed validation popup. I was seeing the same behavior in both Chrome and Edge.

@bwied There is a new feature in 5.1.0 that allows you to select whether the form automatically focuses on the first field with a validation error. Maybe this will help you?

[bwied]

@heath-freenome I'm sorry that I overlooked the ui:emptyValue prop, but thank you for updating the sample anyways.

To answer your question, the focusOnFirstError prop did indeed help. I appreciate your follow-up and the continued effort that you and everybody else are putting into this project.