Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

📋 Error message component

License

NotificationsYou must be signed in to change notification settings

react-hook-form/error-message

Repository files navigation

React Hook Form Logo - React hook custom hook for form validation

Performant, flexible and extensible forms with easy to use validation.

npm downloadsnpmnpm

Goal

A simple component to render associated input's error message.

Install

$ npm install @hookform/error-message

Quickstart

  • Single Error Message
importReactfrom'react';import{useForm}from'react-hook-form';import{ErrorMessage}from'@hookform/error-message';exportdefaultfunctionApp(){const{ register,formState:{ errors}, handleSubmit}=useForm();constonSubmit=(data)=>console.log(data);return(<formonSubmit={handleSubmit(onSubmit)}><inputname="singleErrorInput"ref={register({required:'This is required.'})}/><ErrorMessageerrors={errors}name="singleErrorInput"/><ErrorMessageerrors={errors}name="singleErrorInput"render={({ message})=><p>{message}</p>}/><inputname="name"ref={register({required:true})}/><ErrorMessageerrors={errors}name="name"message="This is required"/><inputtype="submit"/></form>);}
  • Multiple Error Messages
importReactfrom'react';import{useForm}from'react-hook-form';import{ErrorMessage}from'@hookform/error-message';exportdefaultfunctionApp(){const{ register,formState:{ errors}, handleSubmit}=useForm({criteriaMode:'all',});constonSubmit=(data)=>console.log(data);return(<formonSubmit={handleSubmit(onSubmit)}><inputname="multipleErrorInput"ref={register({required:'This is required.',pattern:{value:/d+/,message:'This input is number only.',},maxLength:{value:10,message:'This input exceed maxLength.',},})}/><ErrorMessageerrors={errors}name="multipleErrorInput"render={({ messages})=>messages&&Object.entries(messages).map(([type,message])=>(<pkey={type}>{message}</p>))}/><inputtype="submit"/></form>);}

API

PropTypeRequiredDescription
namestring✓Associated field name.
errorsobjecterrors object from React Hook Form. It's optional if you are usingFormProvider.
messagestring | React.ReactElementinline error message.
asstring | React.ReactElement | React.ComponentTypeWrapper component or HTML tag. eg:as="p",as={<p />} oras={CustomComponent}. This prop is incompatible with proprender and will take precedence over it.
renderFunctionThis is arender prop for rendering error message or messages.
Note: you need to setcriteriaMode toall for using messages.

Backers

Thank goes to all our backers! [Become a backer].

Contributors

Thanks goes to these wonderful people. [Become a contributor].

[8]ページ先頭
©2009-2025 Movatter.jp