[英]The validation errors are not showing using React Hook Form
I'm using React Hook Form
in order to validate some simple inputs:我正在使用
React Hook Form
来验证一些简单的输入:
import React from "react";
import useForm from "react-hook-form";
import "./App.css";
function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => {
console.log(data);
};
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit)}>
<input
className="mkn-input"
name="firstName"
placeholder="First name"
ref={register({
required: true,
maxlength: 20,
message: "invalid first name"
})}
/>
<span> {errors.firstName && errors.firstName.message}</span>
<input
placeholder="Last name"
className="mkn-input"
name="lastName"
ref={register({
pattern: /^[A-Za-z]+$/i,
message: "Invalid last name"
})}
/>
{errors.lastName && <span> errors.lastName.message</span>}
<input
name="age"
type="number"
placeholder="Age"
className="mkn-input"
ref={register({ min: 18, max: 99 })}
/>
<input type="submit" className="mkn-btn" />
</form>
</header>
</div>
);
}
export default App;
But I'm facing a weird issue with showing that errors in the DOM, i also to tried to log them in console but without success, what am I missing?但是我在显示 DOM 中的错误时遇到了一个奇怪的问题,我也尝试将它们记录到控制台但没有成功,我错过了什么?
the full code:完整代码:
You need to add the message
in the required
field, or just query if there is an error:您需要在
required
字段中添加message
,或者只查询是否有错误:
<>
<input
name="firstName"
placeholder="First name"
ref={register({
required: 'invalid first name'
})}
/>
<span> {errors.firstName && errors.firstName.message}</span>
</>
// Or
<>
<input
placeholder="Last name"
className="mkn-input"
name="lastName"
ref={register({
required: true,
pattern: /^[A-Za-z]+$/i
})}
/>
{errors.lastName && <span>Invalid last name</span>}
</>
// Or https://react-hook-form.com/advanced-usage#ErrorMessage
function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => {
console.log(data);
};
return (
<div className="App">
<header className="App-header">
<form onSubmit={handleSubmit(onSubmit)}>
<input
className="mkn-input"
name="firstName"
placeholder="First name"
ref={register({
required: 'invalid first name'
})}
/>
<span> {errors.firstName && errors.firstName.message}</span>
<input
placeholder="Last name"
className="mkn-input"
name="lastName"
ref={register({
required: true,
pattern: /^[A-Za-z]+$/i
})}
/>
{errors.lastName && <span>Invalid last name</span>}
<input
name="age"
type="number"
placeholder="Age"
className="mkn-input"
ref={register({ min: 18, max: 99 })}
/>
<input type="submit" className="mkn-btn" />
</form>
</header>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.