React hook form

npm install react-hook-form //installation

Source: grepper.com

React hook form

//react hook form with tailwind css
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form className="w-full" onSubmit={handleSubmit(onSubmit)}>
                  <div className="form-control w-full mb-5">
                    <label className="">
                      <span className="text-secondary font-semibold text-lg">
                        Email
                      </span>
                    </label>
                    <input
                      type="text"
                      placeholder="example@email.com"
                      className="input input-bordered w-full rounded-full"
                      {...register('email', {
                        required: {
                          value: true,
                          message: 'Email Required !!!',
                        },
                        pattern: {
                          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/i,
                          message: 'Invalid Email Provided !!!',
                        },
                      })}
                    />
                    <label className="level font-bold">
                      {errors.email?.type === 'required' && (
                        <span className="label-text-alt text-red-500">
                          {errors.email.message}
                        </span>
                      )}
                      {errors.email?.type === 'pattern' && (
                        <span className="label-text-alt text-red-500">
                          {errors.email.message}
                        </span>
                      )}
                    </label>
                  </div>
                  <div className="form-control w-full">
                    <label className="">
                      <span className="text-secondary font-semibold text-lg">
                        Password
                      </span>
                    </label>
                    <input
                      type="password"
                      placeholder="abcd123$"
                      className="input input-bordered w-full rounded-full"
                      {...register('password', {
                        required: {
                          value: true,
                          message: 'Password Required !!!',
                        },
                        pattern: {
                          value: /(?=.*[!#$%&?^*@~() "])(?=.{8,})/,
                          message:
                            'Password Must be 8 char including a special char !!!',
                        },
                      })}
                    />
                    <label className="level font-bold">
                      {errors.password?.type === 'required' && (
                        <span className="label-text-alt text-red-500">
                          {errors.password.message}
                        </span>
                      )}
                      {errors.password?.type === 'pattern' && (
                        <span className="label-text-alt text-red-500">
                          {errors.password.message}
                        </span>
                      )}
                    </label>
                  </div>         
          <input type="submit" />
    </form>
  );
}

Source: grepper.com

Similar codes

0 vote239 views1 answer
Ng2 validations angular using reactiveforms
Javascript React
0 vote220 views1 answer
React children map
Javascript React
7 votes237 views4 answers
React history push search params
Javascript React
0 vote235 views1 answer
React native 'UMConstantsInterface/UMConstantsInterface.h' file not found
Javascript React
0 vote238 views1 answer
Change value in array react
Javascript React
2 votes241 views1 answer
Best react native ui library
Javascript React
0 vote240 views1 answer
React native elements bottom sheet close on back button press
Javascript React
0 vote233 views1 answer
Override backswipe behaviour in ios and android react native
Javascript React
5 votes253 views1 answer
React native backgrunde img
Javascript React
9 votes244 views2 answers
Axios react js
Javascript React