How can validate and send react form data to fire base data base?

Question

I try it but not working

    import React from "react";
    import "./App.css";
    import { useForm } from "react-hook-form"; 
    import classNames from "classnames";
    import { useState } from "react";
    
    
    
    function App() {
      const { register, handleSubmit,formState: { errors } } = useForm();
      // console.log(errors);
      const onSubmit = data => console.log(JSON.stringify(data));


const postData = async (e)=>{
    e.preventDefault();
    const res = await fetch("https://test1-5022f-default-rtdb.firebaseio.com/reactformData.json",
    {
      method:"POST",
      header:{
        "content-type":"application/json",

      },

Here what I pass in body?

 body:JSON.stringify(data)
    }
    
    )
  };

There are many fields in my form but here I show some

return (
    <div>

<div className="container">
      
      <div className="form-group my-3 ">
        <form name="Registration_form" id="Form" action="" method="POST" onSubmit={handleSubmit(onSubmit)}>
          
          <div className="form-group my-3">
            <label htmlFor="name">Name:</label>
           
            <input 
              type="text" 
              name="Name" 
              id="Name" 
              className={classNames("form-control",{"is-invalid":errors.Name,})}  
              autoComplete="off" 
              {...register('Name', 
              { required: true,
                maxLength: 15,
                pattern: /^[A-Za-z]+$/
              
              })
              }

              
              />

            <span id="name" className="text-danger fw-bold">{errors.Name?.type === "required"  && "This field is required"}</span>

            <span id="name" className="text-danger fw-bold">{errors.Name?.type ==="maxLength" && "Length Should be less then 15"}</span>

            <span id="name" className="text-danger fw-bold">{errors.Name?.type === "pattern"  && "Digits are not allow"}</span>

          </div>

  </div>
      <div className="form-group my-3">
        <label htmlFor="email">Email: </label>
        
        <input 
          type="text" 
          name="email" 
          id="email" 
          className={classNames("form-control",{"is-invalid":errors.email,})}  
          placeholder="email@example.com" 
          autoComplete="off" 
          {...register('email', 
          { 
            required: true,
            pattern:/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
            
          
          })
          }
        
          />

          <span id="mail" className="text-danger fw-bold">{errors.email?.type === "required"  && "Email is required"}</span>

          <span id="mail" className="text-danger fw-bold">{errors.email?.type === "pattern"  &&"Invalid format"}</span>

       
      </div>
<input type="submit" id="submit" value="submit" onClick={postData} className="btn btn-success my-3" />
        </form>

That is code which I try but it not working anybody review it and give your valuable comments and suggestions Basically I want form validation using react hook form,its done but when I stuck in passing data to fire base data base when I use, useState then its override because react hook form already store it but how to pass it to data base with out useState?? Through react hook form

Instead of using the REST API, did you consider using the SDK that Firebase providers? https://firebase.google.com/docs/database/web/start — Frank van Puffelen, Jul 29 '22 at 01:02

Raja · Accepted Answer · 2022-07-29T06:20:20.863

0

You should remove your onClick from the submit button and handle your form submission from the onSubmit event on the form. Send your form data to your firebase endpoint, from your onSubmit function like so.

<input type="submit" id="submit" value="submit" onClick={postData}  <-- Remove this
className="btn btn-success my-3" />

...

const onSubmit = (data) => {
    // All your form fields will the converted to json object (data)
    // and will be handled by hooks form
    console.log(data); 
    // send data to firebase API
    const responseRaw = fetch(
      "https://your-firebase-url",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      }
    );
    const response = responseRaw.json();
   
  };

edited Jul 29 '22 at 06:20

answered Jul 29 '22 at 01:33

Raja

417
3
9

It's work but I want when data stored in data base then fields will empty but there after storing data in data base fields remain filled How to empty the fields after storing data in data base?? – Shaheer Ahmed Jul 29 '22 at 05:05
Hi @ShaheerAhmed, you can refer to the official docs (https://react-hook-form.com/api/useform/reset), for the form reset logic :) – Raja Jul 29 '22 at 06:21
`const onSubmit = async (data) => { console.log(data); // send data to firebase API const responseRaw = await fetch( "https://test1-5022f-default-rtdb.firebaseio.com/reactformData.json", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) } ); reset(responseRaw); const response = responseRaw.json(); };` I try it but it not working?? – Shaheer Ahmed Jul 29 '22 at 06:47

How can validate and send react form data to fire base data base?

1 Answers1