custom validators need some context, any context about modular-forms

[fabian-hiller]

Thank you for your detailed feedback. I'll give it some thought.

[fabian-hiller]

I don't quite understand the problem you are describing. As described here, small helper functions can be used for validation. For individual validations custom can be used. Alternatively you can use custom to create your own validation functions.

[Hookyns]

@nzdeep's text is quite a mess (sorry 😄). But I understand it because I have the same issue.

Validators have only one parameter, the value. That's not enough. It would be great to have a second parameter, eg. ref to field or some object containing ref to field, ref to input or something like that. See Angular's ValidatorFn.

Some people use validation messages like: "Field 'Firstname' cannot be empty" (or something like that) for the required. How can you get the name of validated field? Creating unique validation messages for each input is not a good solution. We already have labels, so we can just grab label of the field.

Something like:

type ValidationContext = {
    field: FieldStore<T, U>;
    element: FieldElement;
}

function required<TFieldValue extends FieldValue>(error?: string): (value: Value<TFieldValue>, context: ValidationContext) => string {
    return (value, context) => {
        // ...
        const label = context.element.form.querySelector(`[for='${context.element.id}']`).innerHTML;
        return (error ?? "Field '{label}' is required.").replace("{label}", label);
    };
}

And it's not just about validation messages; it's handy in several cases.

PS: With access to FieldStore we don't even need the value parameter, right? But it would be breaking change.
PS2: I hope my description is a little better. 😅

[fabian-hiller]

Thanks for your description. If I understand correctly, you want to outsource the generation of the error message instead of passing it as an argument. I don't know if I would recommend that. It just makes your code harder to follow. However, I understand that a context can be useful in general.

[Hookyns]

you want to outsource the generation of the error message instead of passing it as an argument

Well, I want to create custom validation rules with messages defined inside those rules (consistency, maintainability etc.), but I'd like to have those messages dynamic. Dumb example return `Value of '${fieldLabel}' must be greater than ${minValue}`;. This is just an example with messages, but like you said, context can be useful in general.

[A little bit OT]
I prefer React and Solid but I work with Angular too and even I don't like it much, I have to admit that validation system in combination with directives is great.
Eg. simple required validation. I have a validation-required directive that I can add to any form control. It adds Angular's validator with predefined, localized error message and it even adds required css class on the element, so I can handle this in CSS and idk change border to red, add the asterisk or something like that.
Here's quick StackBlitz demo

I'd love to achieve similar behavior/DX in SolidJS.

But eg. that asterisk would require some complex validation rule factory with some kind of mount/unmount logic. I'm just thinking out loud...

export type ContextValidator = (message: string, ...params: any[]) => {
    onMount: (context: ValidationContext) => void;
    onCleanup: (context: ValidationContext) => void;
    validator: (value: Value, context: ValidationContext) => string;
};

export type FieldProps<TFieldValues extends FieldValues, TResponseData extends ResponseData, TFieldName extends FieldPath<TFieldValues>> = {
    // ...                          \/
    validate?: Maybe<MaybeArray<ContextValidator | ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>;
    // ...
};