Skip to content

Conversation

@oliverviljamaa
Copy link
Contributor

@oliverviljamaa oliverviljamaa commented May 13, 2020

Context

The current form experience is not great, as the immediate validation messages make the rest of the form jump. In addition, the form validation messages have the body text colour and are not noticeable.

Changes

  • the validation errors are only shown after blur or the first submit to provide a more typical experience
  • the validation errors are shown as smaller, red text

Screenshots

After

Before

(schema errors)


const fieldError = (key: keyof FormFields) =>
form.touched[key] && form.errors[key] ? <Text>{form.errors[key]}</Text> : null;
(form.submitCount > 0 || form.touched[key]) && form.errors[key] ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seen this logic three times now, maybe you should move to a library?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, will see if I can create a type-safe component 👍

export const TestFields: FC<TestFieldsProps> = ({ form, testType }) => {
const fieldError = (key: keyof TestType['resultsSchema']['properties']) =>
form.touched[key] && form.errors[key] ? <Text>{form.errors[key]}</Text> : null;
(form.submitCount > 0 || form.touched[key]) && form.errors[key] ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 :-)

"addTestToIdentifierPage.button": "Add test result",
"addTestToIdentifierPage.success": "Test result for {{ identifier }} added."
"addTestToIdentifierPage.success": "Test result for {{ identifier }} added.",
"testFields.error.generic": "Please check the input"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slightly odd phrase. Perhaps something more like "Invalid value, please try again"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, tried to follow the Please x phrasing of the other messages, but it ended up weird.

Copy link
Contributor

@StevePole StevePole left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks fine other than those small things

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants