Use modalForm Validation with custom submit

I want my custom submit to still check the built in vlaidation provided with the modalForm settings const { getInputProps, saveButtonProps, modal: { show, close, title, visible, submit }, } = useModalForm({ refineCoreProps: { resource: "skills", action: "create", }, initialValues: { name: "", description: "", curl_cmd: "", status_id: 12, app_id: app_id, }, validate: { name: (value) => (value.length < 2 ? "Too short title" : null), description: (value) => (value.length < 10 ? "Too short description" : null), }, });
3 Replies
kapa.ai
kapa.ai4w ago
Hi @Matt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that your custom submit button still checks the built-in validation provided with the useModalForm settings, you can utilize the saveButtonProps and the submit function. Here is an example of how you can achieve this:
import { Button, Modal, TextInput, Box } from "@mantine/core";
import { useModalForm } from "@refinedev/mantine";

const MyComponent = () => {
const {
getInputProps,
saveButtonProps,
modal: { show, close, title, visible, submit },
} = useModalForm({
refineCoreProps: {
resource: "skills",
action: "create",
},
initialValues: {
name: "",
description: "",
curl_cmd: "",
status_id: 12,
app_id: app_id,
},
validate: {
name: (value) => (value.length < 2 ? "Too short title" : null),
description: (value) => (value.length < 10 ? "Too short description" : null),
},
});

return (
<>
<Button onClick={show}>Show Modal</Button>
<Modal {...modal}>
<TextInput
mt={8}
label="Name"
placeholder="Name"
{...getInputProps("name")}
/>
<TextInput
mt={8}
label="Description"
placeholder="Description"
{...getInputProps("description")}
/>
<Box mt={8} sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button
{...saveButtonProps}
onClick={(e) => {
// Custom logic before submit
console.log("Custom logic before submit");
// Call the built-in submit function to trigger validation and submit
submit();
}}
>
Save
</Button>
</Box>
</Modal>
</>
);
};

export default MyComponent;
import { Button, Modal, TextInput, Box } from "@mantine/core";
import { useModalForm } from "@refinedev/mantine";

const MyComponent = () => {
const {
getInputProps,
saveButtonProps,
modal: { show, close, title, visible, submit },
} = useModalForm({
refineCoreProps: {
resource: "skills",
action: "create",
},
initialValues: {
name: "",
description: "",
curl_cmd: "",
status_id: 12,
app_id: app_id,
},
validate: {
name: (value) => (value.length < 2 ? "Too short title" : null),
description: (value) => (value.length < 10 ? "Too short description" : null),
},
});

return (
<>
<Button onClick={show}>Show Modal</Button>
<Modal {...modal}>
<TextInput
mt={8}
label="Name"
placeholder="Name"
{...getInputProps("name")}
/>
<TextInput
mt={8}
label="Description"
placeholder="Description"
{...getInputProps("description")}
/>
<Box mt={8} sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button
{...saveButtonProps}
onClick={(e) => {
// Custom logic before submit
console.log("Custom logic before submit");
// Call the built-in submit function to trigger validation and submit
submit();
}}
>
Save
</Button>
</Box>
</Modal>
</>
);
};

export default MyComponent;
In this example, the submit function is called within the onClick handler of the custom button. This ensures that the built-in validation is checked before the form is submitted. For more details, you can refer to the documentation on useModalForm with Ant Design (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#submit) and Mantine (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#savebuttonprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4w ago
<@480113761881948183> kapa.ai is still learning and improving, please let us know how it did by reacting below
generous-apricot
generous-apricot4w ago
validation is not running