Field Validation API

[nathanforce]

Hey!

I'm having a hard time getting my desired field validation behavior out of the current form constraints API and based on some issues I've found here it seems others may be, too. I wanted to open a discussion to get clarity on the intent of the behavior and, if possible, a suggested path forward (acknowledging that maybe I need to fork the repo).

What I'm trying to do
Similar to #6983, I'd like to have more control over the end user experience when interacting with invalid fields. Specifically:

• Defer to react-aria for managing a field's validation state
• Invalid fields should prevent form submission
• Validation errors should not show up until the user has interacted with, or submitted, the field
• Once an error is shown, update the validation in real time
• Support both controlled and uncontrolled field values
• Allow developers to provide custom constraints via the validate function
• Support server errors and client errors
• Consistent behavior across all field types

What isn't working
I'm stuck between a few choices here. Behavior wise, I mostly want validationBehavior="native", except that I want to control what happens with the error as a user interacts with the field after the error is shown. Since I want to control this behavior I'm forced to use validationBehavior="aria" and reimplement the submit-blocking behavior myself.

However, if I go this path I'm not able to validate required fields before submission if they're empty/null, as react-aria stopped calling validation on empty fields in 1.5.0 (See #7715). Per this tweet from @devongovett, I should be able to use a combination of isRequired and validate, but in my testing, isRequired does nothing when using validationBehavior="aria".

I suppose my questions are:

1. Are my goals unreasonable or incompatible with react-aria? If so I can explore forking to get my desired UX.
2. Maybe I'm just holding it all wrong and my goals are actually achievable today.

If it helps, the API I'm trying to standardize around is having all of my various Field components accept a constraints={[]} prop where each item is a function. This was working well until 1.5.0.

Thank you for all y'all have done here! Happy to provide any more details or jump on a call.

[nathanforce]

I've created this sandbox to try and understand expected behavior of isRequired for useDateField and useTextField and I'm ultimately just confused. @devongovett @snowystinger maybe you could chime in with expected behavior? It seems to me that isRequired does not work at all with validationBehavior="aria", regardless of field type. Combined with the change linked above where you no longer call custom validation for empty date fields means there is no API to make an empty DateField invalid when using aria validationBehavior?

https://codesandbox.io/p/sandbox/cocky-matsumoto-3lq3gd

[devongovett]

validationBehavior="aria" basically means that you are responsible for validation. All isRequired does is set aria-required on the input so it gets announced by screen readers. HTML form submission doesn't get prevented unless validationBehavior="native", so if you're using the aria mode you must do that yourself (or use a form validation library).

Sounds like you want validationBehavior="native".

• To customize the error message for the isRequired state, use the validationDetails. This will have a valueMissing property set to true. The validate function is really only for custom validation errors, like matching a regex.
• To trigger re-validation in real time, you could trigger the native 'change' event, which usually only happens on blur rather than as the user types. This is what React Aria uses to trigger form validation.

Here's a working fork of your sandbox: https://codesandbox.io/p/devbox/floral-monad-84drvh?file=%2Fsrc%2FApp.js%3A34%2C16&workspaceId=ws_E77RHrAnKQ4LSjLHhBuDiz

• Added <input> element to DateField using inputProps and inputRef. This will prevent browser form submission when the date field is required.
• Added custom error message when validationDetails.valueMissing
• Added onChange override to useTextField and useDateFieldState, which dispatches the native 'change' event on the inputRef when isInvalid. This will trigger re-validation in realtime.

[nathanforce]

@devongovett Would you mind making that sandbox fork public? I'm getting a permissions error.

[devongovett]

oh sorry, yes. done

[nathanforce]

Thank you for your help on this Devon! Switching to native and emitting a change event manually ended up working great.

Really pleased with where our solution ended up, sharing below in case others are looking for an abstraction of field validation. We landed on the concept of each of our field components accepting an array of constraints and internally mapping those to the relevant react-aria validation props. A constraint is a combination of a requirement + the error message.

Contrived example here but it shows the API exhaustively.

<TextField
  constraints={[
    new ValueMissingConstraint(),
    new TooShortConstraint(2, 'Must be at least 2 characters'),
    new TooLongConstraint(50, 'Cannot be less than 50 characters'),
    new PatternMismatchConstraint(
      /^[a-zA-Z\s]+$/,
      'Only letters and spaces allowed'
    ),
    new TypeMismatchConstraint(
      'email',
      'Must be a valid email address'
    ),
    new CustomErrorConstraint<string>((value: string) => {
      if (!value) return null;
      if (value.toLowerCase() === 'admin')
        return 'Name cannot be admin';
      return null;
    }),
    YupValueConstraint(formSchema.fields.name),
  ]}
  name="name"
  label="Name"
/>

One thing that ended up needing a little hack is that there is no way to determine which validationError maps to which key of validationDetails