如何在 mantine/form 提交后聚焦第一个出错的输入框【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine当表单校验失败时用户往往并不知道该修哪个字段。Mantine 的mantine/form包提供了useFormhook 来管理表单状态、校验与提交配合form.onSubmit的错误回调和form.getInputNode方法可以在提交校验失败时自动把焦点移到第一个出错的输入框上。本文给出在mantine/form中实现这一交互的完整做法准备依赖、理解onSubmit双回调机制、编写聚焦逻辑以及验证效果。准备条件实现需要用到两个包mantine/form提供useFormhook独立于其他库除 React 外没有其他依赖也可以脱离 Mantine 组件用于原生输入框mantine/core提供TextInput、Button、Group等输入组件所有 Mantine 输入组件开箱即支持useForm。官方文档给出的安装方式对应 安装文档 中的InstallScript packagesmantine/formnpx mantine add form该命令会自动安装mantine/form并引入所需依赖如果你只需要表单状态管理而不使用 Mantine 输入组件单独安装mantine/form也可以。理解 onSubmit 的错误回调form.onSubmit接收两个函数见 use-form 文档第一个函数在校验通过后被调用参数为校验通过后的表单值第二个函数在校验失败时被调用第一个参数为form.errors在提交时刻的错误对象类型为Recordstring, React.ReactNode也可以从form实例上直接取typeof form.errors。也就是说不需要自己再读一遍form.errors错误回调的参数就是当前提交时刻的全部错误对象的键是字段路径嵌套字段使用点分路径如user.email。获取输入框 DOM 节点form.getInputNodeform.getInputNode用于按字段路径取回对应的输入 DOM 节点见 官方问答How can I focus the first input with error with use-form?import { useForm } from mantine/form; const form useForm({ mode: uncontrolled, initialValues: { order_id: null, user: { email: }, }, }); // 返回 order_id 输入框的 DOM 节点 form.getInputNode(order_id); // 返回 user.email 输入框的 DOM 节点 form.getInputNode(user.email);从 use-form 实现 可以看到它按data-path属性在文档中查询节点const getInputNode: GetInputNodeValues (path) document.querySelector([data-path${getDataPath(name, path)}]);这带来两个使用前提输入组件必须通过form.getInputProps(path)展开连接表单——getInputProps会带上data-path等属性未连接的输入框查不到节点getInputNode可能返回null聚焦时要用可选链?.focus()这也是官方示例的写法。完整示例提交失败时聚焦第一个出错字段以下是官方文档错误处理页 对应的 focusError 示例给出的实现包含必填姓名与邮箱格式两个校验规则import { Button, Group, TextInput } from mantine/core; import { isEmail, isNotEmpty, useForm } from mantine/form; function Demo() { const form useForm({ mode: uncontrolled, name: register-form, initialValues: { name: , email: , }, validate: { name: isNotEmpty(Name is required), email: isEmail(Invalid email), }, }); return ( form onSubmit{form.onSubmit( (values) console.log(values), (errors) { const firstErrorPath Object.keys(errors)[0]; form.getInputNode(firstErrorPath)?.focus(); } )} TextInput withAsterisk labelYour name placeholderYour name key{form.key(name)} {...form.getInputProps(name)} / TextInput withAsterisk labelYour email placeholderyouremail.com mtmd key{form.key(email)} {...form.getInputProps(email)} / Group justifyflex-end mtmd Button typesubmitSubmit/Button /Group /form ); }各部分职责validate配置字段的校验规则这里用mantine/form自带的isNotEmpty和isEmail校验器提交按钮放在form内触发form.onSubmit的双回调校验通过走第一个函数示例中打印values校验失败走第二个函数错误回调中Object.keys(errors)[0]取到第一个错误字段的路径form.getInputNode(firstErrorPath)?.focus()取回该字段的 DOM 节点并聚焦每个TextInput通过key{form.key(path)}和{...form.getInputProps(path)}连接到表单其中getInputProps会负责把错误显示withError默认开启、onChange等行为接到输入框上。验证效果按示例运行后验证路径为保持姓名与邮箱都为空点击 Submit。此时两个字段都不满足规则错误对象同时包含name和email观察焦点落在第一个字段name的输入框上——因为errors键的顺序中name排在首位Object.keys(errors)[0]取到的是它只填姓名、邮箱留空或填错再提交则焦点应落在email输入框上输入框同时会显示对应的错误文案示例中为Invalid email两个字段都合法时第一个回调被调用控制台打印当前表单值示例中的console.log(values)不触发聚焦逻辑。需要注意的边界文档示例依赖errors对象的键顺序来取第一个错误字段示例中的顺序与字段在initialValues/validate中的声明顺序一致。如果你的表单字段较多且错误顺序与视觉顺序不同可以在错误回调中按自己定义的字段优先级遍历路径找到第一个getInputNode能取到节点的路径后再focus()——机制仍是文档给出的errorsgetInputNode文档本身只演示了Object.keys(errors)[0]这一种取法。相关文档useForm 文档onSubmit/onReset回调签名、onSubmitPreventDefault选项默认对 submit 事件调用event.preventDefault()可改为never或validation-failed错误处理文档form.errors、setErrors、setFieldError、clearErrors等 API 与错误对象类型FormErrors校验文档validate规则写法校验器文档isNotEmpty、isEmail等内置校验器这套做法onSubmit错误回调 getInputNode聚焦同样适用于嵌套字段传入点分路径即可取到对应输入框的节点例如form.getInputNode(user.email)。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在 @mantine/form 提交后聚焦第一个出错的输入框
如何在 mantine/form 提交后聚焦第一个出错的输入框【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine当表单校验失败时用户往往并不知道该修哪个字段。Mantine 的mantine/form包提供了useFormhook 来管理表单状态、校验与提交配合form.onSubmit的错误回调和form.getInputNode方法可以在提交校验失败时自动把焦点移到第一个出错的输入框上。本文给出在mantine/form中实现这一交互的完整做法准备依赖、理解onSubmit双回调机制、编写聚焦逻辑以及验证效果。准备条件实现需要用到两个包mantine/form提供useFormhook独立于其他库除 React 外没有其他依赖也可以脱离 Mantine 组件用于原生输入框mantine/core提供TextInput、Button、Group等输入组件所有 Mantine 输入组件开箱即支持useForm。官方文档给出的安装方式对应 安装文档 中的InstallScript packagesmantine/formnpx mantine add form该命令会自动安装mantine/form并引入所需依赖如果你只需要表单状态管理而不使用 Mantine 输入组件单独安装mantine/form也可以。理解 onSubmit 的错误回调form.onSubmit接收两个函数见 use-form 文档第一个函数在校验通过后被调用参数为校验通过后的表单值第二个函数在校验失败时被调用第一个参数为form.errors在提交时刻的错误对象类型为Recordstring, React.ReactNode也可以从form实例上直接取typeof form.errors。也就是说不需要自己再读一遍form.errors错误回调的参数就是当前提交时刻的全部错误对象的键是字段路径嵌套字段使用点分路径如user.email。获取输入框 DOM 节点form.getInputNodeform.getInputNode用于按字段路径取回对应的输入 DOM 节点见 官方问答How can I focus the first input with error with use-form?import { useForm } from mantine/form; const form useForm({ mode: uncontrolled, initialValues: { order_id: null, user: { email: }, }, }); // 返回 order_id 输入框的 DOM 节点 form.getInputNode(order_id); // 返回 user.email 输入框的 DOM 节点 form.getInputNode(user.email);从 use-form 实现 可以看到它按data-path属性在文档中查询节点const getInputNode: GetInputNodeValues (path) document.querySelector([data-path${getDataPath(name, path)}]);这带来两个使用前提输入组件必须通过form.getInputProps(path)展开连接表单——getInputProps会带上data-path等属性未连接的输入框查不到节点getInputNode可能返回null聚焦时要用可选链?.focus()这也是官方示例的写法。完整示例提交失败时聚焦第一个出错字段以下是官方文档错误处理页 对应的 focusError 示例给出的实现包含必填姓名与邮箱格式两个校验规则import { Button, Group, TextInput } from mantine/core; import { isEmail, isNotEmpty, useForm } from mantine/form; function Demo() { const form useForm({ mode: uncontrolled, name: register-form, initialValues: { name: , email: , }, validate: { name: isNotEmpty(Name is required), email: isEmail(Invalid email), }, }); return ( form onSubmit{form.onSubmit( (values) console.log(values), (errors) { const firstErrorPath Object.keys(errors)[0]; form.getInputNode(firstErrorPath)?.focus(); } )} TextInput withAsterisk labelYour name placeholderYour name key{form.key(name)} {...form.getInputProps(name)} / TextInput withAsterisk labelYour email placeholderyouremail.com mtmd key{form.key(email)} {...form.getInputProps(email)} / Group justifyflex-end mtmd Button typesubmitSubmit/Button /Group /form ); }各部分职责validate配置字段的校验规则这里用mantine/form自带的isNotEmpty和isEmail校验器提交按钮放在form内触发form.onSubmit的双回调校验通过走第一个函数示例中打印values校验失败走第二个函数错误回调中Object.keys(errors)[0]取到第一个错误字段的路径form.getInputNode(firstErrorPath)?.focus()取回该字段的 DOM 节点并聚焦每个TextInput通过key{form.key(path)}和{...form.getInputProps(path)}连接到表单其中getInputProps会负责把错误显示withError默认开启、onChange等行为接到输入框上。验证效果按示例运行后验证路径为保持姓名与邮箱都为空点击 Submit。此时两个字段都不满足规则错误对象同时包含name和email观察焦点落在第一个字段name的输入框上——因为errors键的顺序中name排在首位Object.keys(errors)[0]取到的是它只填姓名、邮箱留空或填错再提交则焦点应落在email输入框上输入框同时会显示对应的错误文案示例中为Invalid email两个字段都合法时第一个回调被调用控制台打印当前表单值示例中的console.log(values)不触发聚焦逻辑。需要注意的边界文档示例依赖errors对象的键顺序来取第一个错误字段示例中的顺序与字段在initialValues/validate中的声明顺序一致。如果你的表单字段较多且错误顺序与视觉顺序不同可以在错误回调中按自己定义的字段优先级遍历路径找到第一个getInputNode能取到节点的路径后再focus()——机制仍是文档给出的errorsgetInputNode文档本身只演示了Object.keys(errors)[0]这一种取法。相关文档useForm 文档onSubmit/onReset回调签名、onSubmitPreventDefault选项默认对 submit 事件调用event.preventDefault()可改为never或validation-failed错误处理文档form.errors、setErrors、setFieldError、clearErrors等 API 与错误对象类型FormErrors校验文档validate规则写法校验器文档isNotEmpty、isEmail等内置校验器这套做法onSubmit错误回调 getInputNode聚焦同样适用于嵌套字段传入点分路径即可取到对应输入框的节点例如form.getInputNode(user.email)。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考