docs: add error messages to field validation examples #3685

vursen · 2024-09-18T12:46:55Z

Added error messages to field validation examples using the available APIs in Flow, Lit and React.

Part of #3548

vursen · 2024-09-26T05:33:11Z

frontend/demo/component/numberfield/react/number-field-step.tsx

+      onValueChanged={(event) => {
+        value.value = event.detail.value;
+      }}


note: Without the 2-way binding, React resets the value property to the initial value every time the error message is updated, which results in bugs.

vursen · 2024-09-26T08:33:33Z

frontend/demo/component/datepicker/date-picker-validation.ts

-          const date = dateFnsParse(target.value ?? '', 'yyyy-MM-dd', new Date());
-          if (isBefore(date, this.minDate)) {
+        @validated="${(event: DatePickerValidatedEvent) => {
+          const field = event.target as DatePicker;


I've created a proposal to improve typing for event.target in CustomEvent-based component events: vaadin/web-components#7868

vursen · 2024-09-27T11:52:33Z

frontend/demo/component/datepicker/date-picker-validation.ts

+            this.errorMessage = 'Invalid date format';
+          } else if (!field.value) {
+            this.errorMessage = 'Field is required';
+          } else if (field.value < field.min!) {


The ISO format is lexicographically ordered, so we can use JS comparison operators to compare date strings directly. This simplifies the solution a bit.

vursen · 2024-09-27T12:00:04Z

frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx

  const minDate = useSignal(new Date());
  const maxDate = useSignal(addDays(new Date(), 60));

  return (
    <DateTimePicker
      label="Appointment date and time"
      helperText="Must be within 60 days from today"
-      value={format(value.value, "yyyy-MM-dd'T'HH:00:00")}


The similar DatePicker and TimePicker examples don't have an initial value, so I decided that it's unnecessary for the DateTimePicker example too. This example seems to already contain a lot due to the validated listener.

vursen · 2024-09-27T12:09:15Z

frontend/demo/component/passwordfield/password-field-validation.ts

+        minlength="6"
+        maxlength="12"


note: These constraints previously didn't apply due to a typo in their property names.

vursen · 2024-09-27T12:27:58Z

frontend/demo/component/passwordfield/react/password-field-validation.tsx

  return (
    // tag::snippet[]
    <PasswordField
-      allowedCharPattern="[A-Za-z0-9]"
+      pattern="^[A-Za-z0-9]+$"


The reason for this change is that I believe it's better for UX to allow users to enter or paste incorrect passwords. When their entry is completely disallowed, users don't get a chance to see an error message and correct them (using the reveal button).

vursen · 2024-09-30T05:25:15Z

frontend/demo/component/datepicker/date-picker-validation.ts

-          if (isBefore(date, this.minDate)) {
+        @validated="${(event: DatePickerValidatedEvent) => {
+          const field = event.target as DatePicker;
+          if (!field.value && (field.inputElement as HTMLInputElement).value) {


I've created a proposal to make the type of inputElement more specific to eliminate the need for manual casting in listeners: vaadin/web-components#7879

web-padawan · 2024-09-30T07:51:37Z

frontend/demo/component/numberfield/number-field-step.ts

+          const field = event.target as NumberField;
+          if ((field.inputElement as HTMLInputElement).validity.badInput) {
+            this.errorMessage = 'Invalid number format';
+          } else if (field.value && Number(field.value) % 0.5 !== 0) {


Could we use validity.stepMismatch here as we also delegate step to native <input>?

Good idea! I've updated text field examples to rely on the ValidityState object where possible.

I've opened a follow-up ticket to introduce API similar to HTML ValidityState for our components: vaadin/web-components#7893

frontend/demo/component/numberfield/number-field-validation.ts

frontend/demo/component/passwordfield/password-field-validation.ts

frontend/demo/component/textarea/text-area-validation.ts

web-padawan · 2024-09-30T08:10:35Z

frontend/demo/component/datepicker/react/date-picker-validation.tsx

+        if (!field.value && (field.inputElement as HTMLInputElement).value) {
+          errorMessage.value = 'Invalid date format';
+        } else if (!field.value) {
+          errorMessage.value = 'Field is required';


Maybe we could simplify this a bit to only check !field.value once:

Suggested change

if (!field.value && (field.inputElement as HTMLInputElement).value) {

errorMessage.value = 'Invalid date format';

} else if (!field.value) {

errorMessage.value = 'Field is required';

if (!field.value) {

const notEmpty = (field.inputElement as HTMLInputElement).value;

errorMessage.value = notEmpty ? 'Invalid date format' : 'Field is required';

IMO, the current approach has a benefit that it keeps all error messages at the same indentation level, which makes them a bit easier to scan.

web-padawan · 2024-09-30T08:11:59Z

frontend/demo/component/timepicker/time-picker-validation.ts

+          if (!field.value && (field.inputElement as HTMLInputElement).value) {
+            this.errorMessage = 'Invalid time format';
+          } else if (!field.value) {
+            this.errorMessage = 'Field is required';


Suggested change

if (!field.value && (field.inputElement as HTMLInputElement).value) {

this.errorMessage = 'Invalid time format';

} else if (!field.value) {

this.errorMessage = 'Field is required';

if (!field.value) {

const notEmpty = (field.inputElement as HTMLInputElement).value;

errorMessage.value = notEmpty ? 'Invalid time format' : 'Field is required';

web-padawan · 2024-09-30T08:12:38Z

frontend/demo/component/timepicker/react/time-picker-validation.tsx

+        if (!field.value && (field.inputElement as HTMLInputElement).value) {
+          errorMessage.value = 'Invalid time format';
+        } else if (!field.value) {
+          errorMessage.value = 'Field is required';


Suggested change

if (!field.value && (field.inputElement as HTMLInputElement).value) {

errorMessage.value = 'Invalid time format';

} else if (!field.value) {

errorMessage.value = 'Field is required';

```suggestion

if (!field.value) {

const notEmpty = (field.inputElement as HTMLInputElement).value;

errorMessage.value = notEmpty ? 'Invalid time format' : 'Field is required';

revert not relevant changes

frontend/demo/component/numberfield/react/number-field-step.tsx

vursen changed the title ~~docs: add error messages to component validation examples~~ docs: add error messages to field validation examples Sep 18, 2024

vursen force-pushed the add-error-messages-to-examples branch 2 times, most recently from 9b8cf90 to 53bcc9e Compare September 25, 2024 12:18

vursen commented Sep 26, 2024

View reviewed changes

vursen force-pushed the add-error-messages-to-examples branch 3 times, most recently from 14c9a08 to 3585586 Compare September 27, 2024 05:48

vursen commented Sep 27, 2024

View reviewed changes

vursen marked this pull request as ready for review September 27, 2024 12:35

vursen requested review from rolfsmeds and web-padawan September 30, 2024 05:24

vursen commented Sep 30, 2024

View reviewed changes

web-padawan approved these changes Sep 30, 2024

View reviewed changes

vursen added 13 commits October 1, 2024 09:44

add error messages to DatePicker examples

6d35622

add error messages to TextField examples

089a97d

add error messages to EmailField examples

3c48700

add error messages to DatePicker custom validation examples

192cb64

add error messages to PasswordField examples

fae6645

add error messages to TextArea examples

e8528b9

add error messages to TimePicker examples

1d22a7f

add error messages to NumberField examples

65d2b5b

sort imports

a01b27e

add error messages to TimePicker custom validation examples

490be6d

format Java examples

e6bc38f

add error messages to ComboBox examples

723b5c8

add error messages to DateTimePicker

2dc6f2a

revert not relevant changes

vursen added 3 commits October 1, 2024 09:46

simplify some aspects of the implementation

6963882

use consistent error message text

dbf3247

use JS native comparison operators to compare ISO date strings

23efedd

vursen force-pushed the add-error-messages-to-examples branch from fcacb55 to 23efedd Compare October 1, 2024 05:46

use ValidityState to identify validation failure reason

b64e8da

web-padawan approved these changes Oct 1, 2024

View reviewed changes

Merge branch 'latest' into add-error-messages-to-examples

7b53abd

vursen commented Oct 1, 2024

View reviewed changes

frontend/demo/component/numberfield/react/number-field-step.tsx Outdated Show resolved Hide resolved

Update frontend/demo/component/numberfield/react/number-field-step.tsx

2df3ee8

vursen removed the request for review from rolfsmeds October 1, 2024 11:51

vursen merged commit 26a796f into latest Oct 1, 2024
3 of 4 checks passed

vursen deleted the add-error-messages-to-examples branch October 1, 2024 11:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add error messages to field validation examples #3685

docs: add error messages to field validation examples #3685

vursen commented Sep 18, 2024 •

edited

Loading

vursen Sep 26, 2024 •

edited

Loading

vursen Sep 26, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 30, 2024 •

edited

Loading

web-padawan Sep 30, 2024

vursen Oct 1, 2024

vursen Oct 1, 2024 •

edited

Loading

web-padawan Sep 30, 2024

vursen Oct 1, 2024 •

edited

Loading

web-padawan Sep 30, 2024

web-padawan Sep 30, 2024

docs: add error messages to field validation examples #3685

docs: add error messages to field validation examples #3685

Conversation

vursen commented Sep 18, 2024 • edited Loading

vursen Sep 26, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 26, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

vursen Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

web-padawan Sep 30, 2024

Choose a reason for hiding this comment

vursen Oct 1, 2024

Choose a reason for hiding this comment

vursen Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

web-padawan Sep 30, 2024

Choose a reason for hiding this comment

vursen Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

web-padawan Sep 30, 2024

Choose a reason for hiding this comment

web-padawan Sep 30, 2024

Choose a reason for hiding this comment

vursen commented Sep 18, 2024 •

edited

Loading

vursen Sep 26, 2024 •

edited

Loading

vursen Sep 26, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 27, 2024 •

edited

Loading

vursen Sep 30, 2024 •

edited

Loading

vursen Oct 1, 2024 •

edited

Loading

vursen Oct 1, 2024 •

edited

Loading