[英]The validation errors are not showing using React Hook Form
我正在使用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;
但是我在顯示 DOM 中的錯誤時遇到了一個奇怪的問題,我也嘗試將它們記錄到控制台但沒有成功,我錯過了什么?
完整代碼:
您需要在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.