React Hook Form (V7) Setup using Bootstrap

React Hook Form (V7) Setup using Bootstrap.md

❄ Related Articles - https://react-hook-form.com/resources

🐼 1. install react-hook-form

npm install react-hook-form

🐼 2. import useForm

import { useForm } from "react-hook-form";

🐼 3. Use useForm()

const { register, handleSubmit, setError, formState: { errors }, reset } = useForm();

🐼 4. Create onSubmit Function

const onSubmit = (data) => {
    // Email Validation
    if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(data.email)) {
      setError("email", {
        type: "validate",
        message: "Please provide a valid email.",
      });
    }
    // Password Validation
    if (
      !/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
        data.password
      )
    ) {
      setError("password", {
        type: "validate",
        message:
          "Your password should contain at least one uppercase, one lowercase, one numeric, one special character and minimum 8 characters.",
      });
    }

    // Confirm Password
    if (data.password !== data.confirmPassword) {
      setError("confirmPassword", {
        type: "match",
        message: "Password did not match.",
      });
    }
    // Create user with email and password
    createUserWithEmailAndPassword(data.email, data.password).then(() => {
      // JWT
      axios
        .post("https://ebike-warehouse.herokuapp.com/login", {
          email: data.email,
        })
        .then(({ data }) => {
          localStorage.setItem("accessToken", data.accessToken);
          setToken(data.accessToken);
        });
      // reset input field
      reset();
    });
  };
 
   // Navigate
  useEffect(() => {
    if (user && token) {
      navigate(from, { replace: true });
    }
  }, [user, from, navigate, token]);

🐼 5. Create Form with validation

<form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column">
        {/* Username */}
        <div className="field">
          <label>Full Name</label>
          <input
            type="text"
            {...register("username", { required: true })}
            placeholder="e.g. John Doe"
            className={`form-control ${errors.username && "is-invalid"}`}
          />
          
          {*/ Error Message */}
          {errors.username && <p className="text-danger">Username is required</p>}
        </div>
        
        {/* Email */}
        <div className="field">
          <label>Work Email</label>
          <input
            type="text"
            {...register("email", { required: true })}
            placeholder="[email protected]"
            className={`form-control ${errors.email && "is-invalid"}`}
          />
          
          {/* Error Message */}
          {errors.email?.type === "required" && <p className="text-danger">Email is required</p>}
        </div>
        
        {/* Password */}
        <div className="field">
          <label>Create Password</label>
          <input
            type="password"
            {...register("password", { required: true })}
            placeholder="Create a password"
            className={`form-control ${errors.password && "is-invalid"}`}
          />
          
          {/* Error Message */}
          {errors.password?.type === "required" && <p className="text-danger">Password is required</p>}
          {errors.password?.type === "validate" && <p className="text-danger">{errors.password.message}</p>}
        </div>
        
        {/* Confirm Password */}
        <div className="field">
          <label>Confirm Password</label>
          <input
            type="password"
            {...register("confirmPassword", { required: true })}
            placeholder="Please confirm your password"
            className={`form-control ${errors.confirmPassword && "is-invalid"}`}
          />
          
          {/* Error Message */}
          {errors.confirmPassword?.type === "required" && <p className="text-danger">Confirm Password is required</p>}
          {errors.confirmPassword?.type === "match" && <p className="text-danger">{errors.confirmPassword.message}</p>}
        </div>
        <input type="submit" value="Register" />
      </form>

.form-container{
    min-width: 300px;
    max-width: 500px;
    margin: auto;
}

.form-container label{
    font-weight: 600;
    color: gray;
}

.form-container input{
    margin: 2px 0;
    padding: 7px;
}

.form-container input[type=submit]{
    margin-top: 15px;
}

form .field{
    display: flex;
    flex-direction: column;
}

.google-btn{
    background-color: #4285F4;
    color: #fff;
    margin: 10px 0;
    width: 100%;
    height: 45px;
    border: none;
    display: flex;
    border-radius: 5px;
}

.google-icon{
    background-color: #fff;
    width: 50px;
    height: 41px;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.google-icon svg{
    font-size: 30px;
}

.google-btn-text{
    font-size: 18px;
    display: flex;
    justify-content: center;
    width: 90%;
    margin-top: 7px;
    
}

✔ If onSubmit() function not triggered console.log(errors)