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();
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.handleSubmit
: Ini adalah fungsi yang digunakan untuk menangani event submit pada form.formState
: Ini adalah objek yang berisi informasi tentang status form, seperti kesalahan validasi (dalam propertierrors
). 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;
Nah, kita akan mengimplementasikan validasi pada input/input.js
. Ubah kodenya seperti berikut:
![](/assets/images/join-discord-official-asinkron-indonesia-3.png)
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.