Sign in Subscribe

Membuat Validasi Form Di React JS Menggunakan React Hook Form

Seringkali, dalam develop aplikasi web kita perlu mengumpulkan data dari pengguna melalui form. Untuk memastikan bahwa data yang diinput oleh pengguna adalah valid, sebelum dikirimkan ke server kita perlu membuat sistem validasi, di React JS sendiri kita bisa memanfaatkan library untuk membuat sistem validasi form daripada harus membuatnya dari nol.

Pada tutorial kali ini kita akan menggunakan React Hook Form, sebuah library React JS yang populer untuk digunakan untuk membuat sistem validasi form.

Apa Itu React Hook Form?

React Hook Form adalah Salah satu library React JS yang bisa membantu Kamu mengelola formulir dengan mudah dan efisien. Ini memanfaatkan fitur React JS Hooks seperti useState, useEffect, dan lainnya untuk mengelola nilai input, validasi, dan lainnya dari form.

Langkah 1: Menyiapkan Project React JS

Pada tutorial ini kita akan menambah fitur validasi pada form input pada projek CRUD data manga di tutorial sebelumnya.

Langkah 2: Menginstal React Hook Form

Kamu bisa menginstall React Hook Form menggunakan npm atau yarn

npm install react-hook-form 
yarn add react-hook-form

Langkah 3: Implementasi Validasi Pada Komponen input.js

Nantinya kita akan menggunakan tiga properti dari React Hook Form yaitu register , handleSubmit , formState 

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  1. register : Ini adalah fungsi yang digunakan untuk menyimpan/mendaftarkan elemen input dalam formulir. Kamu kemudian bisa menggunakannya dalam elemen input untuk menghubungkan input dengan form.
  2. handleSubmit: Ini adalah fungsi yang digunakan untuk menangani event submit pada form.
  3. formState : Ini adalah objek yang berisi informasi tentang status form, seperti kesalahan validasi (dalam properti errors). Kamu menggunakannya untuk menampilkan pesan kesalahan validasi pada tampilan.

Sebelumnya, di project mangalisting frontend, kita sudah membuat sebuah component form input yang mana setelah di input akan melakukan request POST di server backend. Begini kode yang ada di input/input.js :

import React, { useState } from "react";
import "./inputStyle.css";
import { useNavigate } from "react-router-dom";


const Input = () => {
  // State untuk menyimpan data form
  const [formData, setFormData] = useState({
    judul: "",
    penulis: "",
    penerbit: "",
    tanggal_rilis: "",
    rating: "",
    jumlah_volume: "",
    url_baca: "",
  });

  const navigate = useNavigate()

  // Fungsi untuk mengirim data form ke server
  const handleSubmit = async (event) => {
    event.preventDefault();

    if (
      formData.jumlah_volume <= 0 ||
      formData.rating <= 0
    ) {
      alert("Nilai harus diatas 0.");
      setFormData({
        judul: "",
        jumlah_volume: "",
        penerbit: "",
        penulis: "",
        rating: "",
        tanggal_rilis: "",
        url_baca: "",
      });
      return;
    }

    function removeHyphens(inputString) {
      return inputString.replace(/-/g, "");
    }

    const dateWithoutHyphens = Number(removeHyphens(formData.tanggal_rilis));

    const newFormData = {
      ...formData,
      tanggal_rilis: dateWithoutHyphens,
    };
    // Mengirim data newFormData ke server dengan metode POST
    try {
      const response = await fetch("http://localhost:3001/mangalist", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newFormData),
      });

      if (response.ok) {
        // Reset form data jika sukses
        setFormData({
          judul: "",
          jumlah_volume: "",
          penerbit: "",
          penulis: "",
          rating: "",
          tanggal_rilis: "",
          url_baca: "",
        });
      } else {
        console.error("Failed to post data.");
      }

      const data = await response.json();
      if (data.message === "Manga created successfully") {
        navigate("/")
      }else{
        alert(data.message)
      }
    } catch (error) {
      console.error("Error:", error);
    }
  };

  // Fungsi untuk mengupdate state formData saat input fields berubah
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  return (
    <div className="input-container">
      <form className="input-card" onSubmit={handleSubmit}>
        <div className="form-group">
          <input
            required
            placeholder="Judul Manga"
            type="text"
            id="judul"
            name="judul"
            value={formData.judul}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Jumlah Volume"
            type="number"
            id="jumlah_volume"
            name="jumlah_volume"
            value={formData.jumlah_volume}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Penerbit"
            type="text"
            id="penerbit"
            name="penerbit"
            value={formData.penerbit}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Penulis"
            type="text"
            id="penulis"
            name="penulis"
            value={formData.penulis}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Rating"
            type="number"
            id="rating"
            name="rating"
            value={formData.rating}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Tanggal Rilis"
            type="date"
            id="tanggal_rilis"
            name="tanggal_rilis"
            value={formData.tanggal_rilis}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <input
            required
            placeholder="Url Baca"
            type="url_baca"
            id="url_baca"
            name="url_baca"
            value={formData.url_baca}
            onChange={handleInputChange}
          />
        </div>
        <button type="submit">Submit</button>
        <button onClick={()=>navigate("/")}>Back</button>
      </form>
    </div>
  );
};

export default Input;
components/input/input.js

Nah, kita akan mengimplementasikan validasi pada input/input.js . Ubah kodenya seperti berikut:

Close

Silahkan Login/Sign Up

😞 Discord eklusif buat member asinkron.com

Jangan khawatir silahkan Daftar GRATIS 😎

*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.