Adding onBlur event next to onChange event

[holdmybeer30]

Is your feature request related to a problem? Please describe.
In the previous version I was using validators property of superForm() to add some custom validations for multiple fields where I was setting the errors using i18n.
Now I can't do that anymore on onblur, but only within onChange event, which is not an option.
Basically I need to add custom field validations outside the adapters and I cannot mix the i18n with zod or any other adapter because I cannot use localized string when I create the schema to validate the fields on blur, as it should normally work.
I dont want to use the deprecated superformClient.

Describe the solution you'd like
I would need an onBlur event to have the same destructed event like onChange (or something similar), so I can create custom validations for each field, but onblur.
In the previous version, validators supported adding separate error messages for the fields and I need to keep that.

Describe alternatives you've considered
I have tried using the validationMethod: 'onblur' and validators: zod(createProjectSchema) which works perfectly, but as I said above, I cannot set localized strings in my schema (using the refine method) because I have a more complex logic for validating the fields, where the adapter is not enough.
I checked all the documentation and examples, but I couldn't find such a case where you add custom validations for fields, outside the adapters.

[ciscoheat]

I'm hesitant to add events not related to the submit process, as they are quite error-prone. If you check the API for the validate property of superForm, it can be used to make custom validations with an onblur event handler on the input field.

https://superforms.rocks/api#superform-return-type

[pauldiacu]

@ciscoheat Please show me an example based on the docs, how would you set the error messages for fields in a form with multiple inputs, using the on:blur event on each input, without manually setting the error.fieldName data, but autogenerating it like it was in the previous version with validators, because maybe I don't have the full picture and within this logic, I might have to add at least 25% more code for it.
Remember that you cannot use the schema for it, so validate() is not an option.

I've tried this as an example:

const {form, enhance, errors, message, isTainted, tainted, constraints, validate} =
    superForm(data.form, {
      id: "new-project-form",
      validationMethod: "onblur",
      validators: zod(createProjectSchema)
    });
    
function onFieldInteraction(fieldKey: keyof typeof $form) {
    return async () => {
      await validate(fieldKey);

      if (!$errors[fieldKey]) {
        if (fieldKey=== "name") {
          $errors.name = validateProjectName($form.name);
        }
      }
    };
  }

It behaves almost perfectly, except the fact that validators is being called after I set the $errors.name and it overrides my error value.
By this, I am trying to control all fields within a single function, by calling onFieldInteraction('fieldKeyName') on blur. This way, I will prioritize the schema validation and only do my custom validation afterwards.

If something doesn't quite add up, what I need it to add custom message for custom validations using i18n.

[ciscoheat]

Combining the validators option and custom validation is problematic, I can't say much about eventual race conditions. Try to use a setTimeout or tick to set the errors after the update?

[pauldiacu]

Combining the validators option and custom validation is problematic, I can't say much about eventual race conditions. Try to use a setTimeout or tick to set the errors after the update?

Yeah, I thought about that.. using both the custom validation and the validators might create confusion behind the scenes. The issue simply comes from the fact that the blur event happens before validators is being called. Is this a possible issue for the future, shouldn't be the other way around?

I will give it a try with the tick tho :)
Update: tick doesn't actually solve the issue, because the validators is being called anyway after the blur event and I cannot remove the validators because it's required for using the validate method.

[ciscoheat]

You could try setting the validationMethod to 'onsubmit' and see if that helps. Maybe an extra option to turn it off is the solution.

[pauldiacu]

Alright, apparently it works with onsubmit as validationMethod.
Personally I don't like this approach because I have to add a lot of code for this, but ok, that's it.
I hope you'll take into account adjusting the validation or create a relationship between localization and adapters or something similar.
Have a good one and thank you for suggestions!

[pauldiacu]

@ciscoheat
Which adapter would you recommend while working with superforms?
I'm using zod atm but I consider changing it.

[ciscoheat]

I've written some about it here: https://discord.com/channels/1088090866649939990/1088090867723669616/1206540174381817936