1import React, { useState } from "react";
2import "./styles.css";
3function Form() {
4 const [firstName, setFirstName] = useState("");
5 const [lastName, setLastName] = useState("");
6 const [email, setEmail] = useState("");
7 const [password, setPassword] = useState("");
8 return (
9 <form>
10 <input
11 value={firstName}
12 onChange={e => setFirstName(e.target.value)}
13 placeholder="First name"
14 type="text"
15 name="firstName"
16 required
17 />
18 <input
19 value={lastName}
20 onChange={e => setLastName(e.target.value)}
21 placeholder="Last name"
22 type="text"
23 name="lastName"
24 required
25 />
26 <input
27 value={email}
28 onChange={e => setEmail(e.target.value)}
29 placeholder="Email address"
30 type="email"
31 name="email"
32 required
33 />
34 <input
35 value={password}
36 onChange={e => setPassword(e.target.value)}
37 placeholder="Password"
38 type="password"
39 name="password"
40 required
41 />
42 <button type="submit">Submit</button>
43 </form>
44 );
45}
46export default Form;
1// Validation with REGEX
2const rx_live = /^[+-]?\d*(?:[.,]\d*)?$/;
3
4class TestForm extends React.Component {
5 constructor() {
6 super();
7 this.state = {
8 depositedAmount: ''
9 };
10 }
11
12 handleDepositeAmountChange = (evt) => {
13 if (rx_live.test(evt.target.value))
14 this.setState({ depositedAmount : evt.target.value });
15 }
16
17 render() {
18 return (
19 <form>
20 <input
21 type="text"
22 id="depositedAmount"
23 maxLength={9}
24 pattern="[+-]?\d+(?:[.,]\d+)?"
25 placeholder="Enter amount"
26 onChange={this.handleDepositeAmountChange}
27 value={this.state.depositedAmount}
28 />
29 </form>
30 )
31 }
32}
33
1import React from 'react';
2import { useForm } from 'react-hook-form';
3
4function App() {
5 const { register, handleSubmit, errors } = useForm(); // initialize the hook
6 const onSubmit = (data) => {
7 console.log(data);
8 };
9
10 return (
11 <form onSubmit={handleSubmit(onSubmit)}>
12 <input name="firstname" ref={register} /> {/* register an input */}
13 <input name="lastname" ref={register({ required: true })} />
14 {errors.lastname && 'Last name is required.'}
15 <input name="age" ref={register({ pattern: /\d+/ })} />
16 {errors.age && 'Please enter number for age.'}
17 <input type="submit" />
18 </form>
19 );
20}
1// ##### Installation #####
2 // npm install react-hook-form
3
4// ##### Example #####
5import React from 'react';
6import { useForm } from 'react-hook-form';
7
8export default function App() {
9 const {
10 register,
11 handleSubmit,
12 watch,
13 formState: { errors },
14 } = useForm();
15 const onSubmit = (data) => console.log(data);
16
17 console.log(watch('example')); // watch input value by passing the name of it
18
19 return (
20 /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
21 <form onSubmit={handleSubmit(onSubmit)}>
22 {/* register your input into the hook by invoking the "register" function */}
23 <input defaultValue="test" {...register('example')} />
24
25 {/* include validation with required or other standard HTML validation rules */}
26 <input {...register('exampleRequired', { required: true })} />
27 {/* errors will return when field validation fails */}
28 {errors.exampleRequired && <span>This field is required</span>}
29
30 <input type="submit" />
31 </form>
32 );
33}
34