react form validation

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