How would you use loader data in validationAttrs in your formDefinition?

[bitofbreeze]

Wanting to define a field like:

price: {
      validationAttrs: {
        required: (fd) => data[fd.get("name")].needsPrice,
      },
    },

The only way I can think of is defining the formDefinition in the component but then you can't use the same formDefinition in validateServerFormData in the action. Maybe making a defineForm function that takes in the data you need to validate against so that you can use it in both. Wondering if anyone else has a good pattern

[andrecasal]

If you generate the validations on the loader (because they depend on the type of user, for example), then I assume you need to send them over to the client and submit them back to the action() in a hidden input.

[brophdawg11]

Yeah - this is how you'd have to do it - here's an example, although for some reason the required error isn't showing on blur, only when I enter a character and then remove it. That's not happening on rvs.fly.dev though so unsure what's going on there.

Add a ?required query param to make the field required, driven by the loader data.

https://stackblitz.com/edit/github-uhczuu?file=app%2Froutes%2Findex.tsx

defineForm is an interesting idea - I think that would be possible in user-land but I'd be careful about the inputs since the only thing you have access to in the action is formData. Right now dynamic validation attrs are possible with a static formDefinition, so I would only look into a defineForm abstraction if you had to support a truly dynamic set of input names - but even then I think you could get pretty far leveraging multiple inputs and/or this type of conditionally non-required input. For example, if you had a survey with a "reason" dropdown and if they chose "other" they got an additional textbox for feedback - I would define both up front, and then only require the textbox when other was selected

let formDefinition = {
  inputs: {
    reason: {
      element: 'select',
      validationAttrs: {
        required: true,
      },
    }, 
    feedback: {
      validationAttrs: {
        required(formData) {
          return formData.get("reason") === "other";
        }
      }
    }
  }
}