fair-rose•3h ago
AutoSave saves even if required fields are empty. How to wait for isValid?
Hi,
So I'm playing with refine.dev with Mui. AutoSave would be lovely to have, but it saves data , even if some fields are required.
I've been using it with Appwrite and it also saves empty values, even if on Appwrite it is specified as Required :/ which I will chat with them about that separately.
It seems to work fine(at least client side) while simply using Save button, as it correctly stops you from saving when a field is in error state, but autosave seems to ignore validation errors.
Any idea what am I doing wrong, or is it just a bug and I should document it better and log on github issues?
The important parts of my code are:
import { AutoSaveIndicator , DateField, Edit, NumberField } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
...
const {
refineCore: { autoSaveProps,onFinishAutoSave },
saveButtonProps,
refineCore: { query },
register,
control,
formState: { errors, isValid:boolean, isValidating },
} = useForm({
mode: 'onChange',
refineCoreProps: {
liveMode: "auto",
autoSave: {
enabled: true,
debounce: 1500,
},
}
});
.... return ( <Edit saveButtonProps={saveButtonProps} autoSaveProps={autoSaveProps}> .... <TextField {...register("name", { required: "This field is required" })} error={!!(errors as any)?.name} label="Name" name="name" /> ... </Edit>
.... return ( <Edit saveButtonProps={saveButtonProps} autoSaveProps={autoSaveProps}> .... <TextField {...register("name", { required: "This field is required" })} error={!!(errors as any)?.name} label="Name" name="name" /> ... </Edit>
3 Replies
Hi @RubiCom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You're correct in observing that Refine's auto-save feature currently triggers saves even when the form is invalid, meaning required fields can be empty and still get sent to the backend. This is a known limitation: the auto-save implementation in Refine does not, by default, wait for form validation (
The current API does not provide a direct way to prevent auto-save when the form is invalid. You would need to implement a custom solution, such as wrapping or overriding the auto-save logic to check
This behavior has been discussed in the community, and similar issues have been raised (see Github Issue #6458), though that issue is about disabling auto-save entirely. Your case—gating auto-save on form validity—would be a valuable feature request if it is not already tracked. - Current Limitation:
As of now, you cannot configure auto-save to wait for
You are not doing anything wrong—this is a limitation of the current auto-save implementation in Refine. There is no built-in way to prevent auto-save from triggering when the form is invalid. If you need this behavior, consider raising a feature request or implementing a custom workaround in your project. If you need help with a custom workaround, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
isValid) before triggering the save. This behavior is not configurable out-of-the-box according to the official documentation and examples.
The documentation for @refinedev/react-hook-form's useForm auto-save feature does not mention any built-in mechanism to prevent auto-save when the form is invalid. It simply states that auto-save will trigger after a debounce period when the user edits the form, and it operates only in edit mode. There is no mention of validation gating the auto-save process, nor an option to enable such behavior in the autoSave configuration. The only validation-related behavior described is for manual saves (e.g., via the Save button), which do respect form validity and prevent submission if there are errors autoSave in useForm Material UI Forms.
This is consistent with your experience: manual saves are blocked by validation, but auto-save is not.
What can you do?
- Workaround:The current API does not provide a direct way to prevent auto-save when the form is invalid. You would need to implement a custom solution, such as wrapping or overriding the auto-save logic to check
formState.isValid before calling the save handler. However, this is not documented in the official sources and would require custom code.
- Report or Track the Issue:This behavior has been discussed in the community, and similar issues have been raised (see Github Issue #6458), though that issue is about disabling auto-save entirely. Your case—gating auto-save on form validity—would be a valuable feature request if it is not already tracked. - Current Limitation:
As of now, you cannot configure auto-save to wait for
isValid using only the documented options. If this is critical for your workflow, you may want to document it as a feature request on GitHub.
Summary:You are not doing anything wrong—this is a limitation of the current auto-save implementation in Refine. There is no built-in way to prevent auto-save from triggering when the form is invalid. If you need this behavior, consider raising a feature request or implementing a custom workaround in your project. If you need help with a custom workaround, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@1112349637609783296> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
fair-roseOP•3h ago
if you can modify values before sending to server with onFinish(values) maybe there is a way to check isValid and cancel save inside onFinish ?