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•2mo 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•2mo ago

<@480113761881948183> kapa.ai is still learning and improving, please let us know how it did by reacting below

implicit-lime•2mo ago

validation is not running