Halo semuanya, kali ini aku bakal bahas sesuatu yang teknis banget mengenai library front-end favoritku yaitu ReactJS,
Buat kalian yang belum tau React JS, React JS adalah library yang dibuat oleh facebook untuk membangun UI aplikasi web atau mobile. selengkapnya kalian bisa kunjungi dokumentasi aslinya disini reactjs.org
Oke, langsung to the point aja ya. Buat kamu yang masih bingung cara validasi input di reactjs kalian bisa ikutin tutorial dibawah ini sampai habis. Cekidot.
Formik dan Yup
Agar validasi input dapat dilakukan dengan cara yang sangat gampang, kita memerlukan 2 library yang penting yaitu formik dan yup.
formik adalah sebuah library yang digunakan untuk menghandle form di reactjs, dengan library ini kita tidak perlu susah-susah mengatur state input kita, semuanya sudah diurus sama formik mulai dari onChange, onBlur, Touched, sampai onSubmit.
Yup adalah library untuk melakukan pengecekan suatu objek, misalkan kita memberikan sebuah objek dengan tiga atribut mulai dari atribut bernilai string, number, boolean. dengan yup kita dapat memastikan bahwa objek yang diinput sesuai dengan tipe data yang kita inginkan. dan yup juga dapat melakukan validasi lainnya sepert minimal character, maximal character, email validation dan regex. dengan yup kita juga bisa memberikan pesan error custom, sehingga kita memiliki pesan error yang beragam.
Pastikan kalian ikutin tutorialnya step by step supaya tidak terjadi error.
Get Started
Pertama - tama kalian harus siapin dulu project reactjs kalian, biar ga bingung kita mulai dari create react app ya.
npx create-react-app react-input-validation
Setelah itu, kita akan menginstall library formik dan yup
npm install --save formik yup
App.js pertama kali
import React from "react";
import MyForm from "./MyForm";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>React JS Validation</h1>
<MyForm />
</div>
);
}
Buatlah sebuah component baru bernama MyForm.js dan tuliskan kode seperti ini
import React from "react";
export default function MyForm() {
return (
<form>
<div className="input-wrapper">
<label>Email Address</label>
<input name="email" placeholder="Enter your email address.." />
</div>
<div className="input-wrapper">
<label>Password</label>
<input type="password" name="password" placeholder="********" />
</div>
<button className="form-btn">Sign in to my account</button>
</form>
);
}
Kode diatas hanyalah sebuah form login sederhana yang akan kita gunakan untuk implementasi formik pada project kita.
Setelah itu tambahkan 2 library diatas dibawah import React from 'react'
MyForm.js
import { useFormik } from "formik";
import * as Yup from "yup";
Inisalisasi Formik
Setelah itu didalam komponen MyForm.js
const formik = useFormik({
initialValues: {
// data form
},
onSubmit: (values) => {
// handle submit form
},
validationSchema: {
// Yup schema
}
});
Kode diatas adalah cara sederhana penggunaan formik, kita menggunakan hooks useFormik(). didalam hooks kita harus memasukkan initialValues,
initalValues adalah data awal input yang kita perlukan, dalam kasus ini kita akan menuliskan email, dan password.
onSubmit adalah handler ketika kita ingin submit form.
validationSchema adalah schema validasi yang akan kita gunakan untuk memvalidasi initialValues yang kita definisikan. lebih jelas nya bisa dilihat pada contoh dibawah ini.
const formik = useFormik({
initialValues: {
// data form
email: "",
password: ""
},
onSubmit: (values) => {
// handle submit form
alert(JSON.stringify(values));
// {"email": "", "password": ""}"
},
validationSchema: Yup.object({
email: Yup.string().required().email(),
password: Yup.string().required()
})
});
kode diatas adalah contoh penggunaannya, kita bisa lihat pada initialValues, kita mendefinisikan object yang akan menjadi final data inputan kita.
lalu untuk onSubmit, kita hanya menampilkan data saja, disini kalian bisa melakukan request ke API dan mengirimkan data secara langsung.
lalu pada validationSchema, disini kita bisa kita membuat Yup object, dan objek ini berisi inputan kita yang akan divalidasi, kalian bisa membaca dokumentasi yup melalui link ini.
Mengaktifkan formik pada JSX kita
Tambahkan kode seperti ini pada elemen <form> kalian, kode berikut digunakan agar kita dapat melakukan submit menggunakan formik
<form onSubmit={formik.handleSubmit}>
Edit elemen input kalian seperti dibawah ini, lakukan hal yang sama untuk input password. kode ini untuk mengganti state value yang ada pada initialValues. sehingga kita mendapatkan value baru selama user mengetikkan sesuatu.
<input
onChange={formik.handleChange}
value={formik.values.email}
name="email"
placeholder="Enter your email address.." />
Secara keseluruan komponen MyForm.js kita akan menjadi seperti ini:
import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
export default function MyForm() {
const formik = useFormik({
initialValues: {
// data form
email: "",
password: ""
},
onSubmit: (values) => {
// handle submit form
alert(JSON.stringify(values));
// {"email": "", "password": ""}"
},
validationSchema: Yup.object({
email: Yup.string().required().email(),
password: Yup.string().required()
})
});
return (
<form onSubmit={formik.handleSubmit}>
<div className="input-wrapper">
<label>Email Address</label>
<input
onChange={formik.handleChange}
value={formik.values.email}
name="email"
placeholder="Enter your email address.."
/>
</div>
<div className="input-wrapper">
<label>Password</label>
<input
onChange={formik.handleChange}
value={formik.values.password}
type="password"
name="password"
placeholder="********"
/>
</div>
<button className="form-btn">Sign in to my account</button>
</form>
);
}
Tambahkan sedikit styling pada styles.css
* {
box-sizing: border-box;
}
.App {
font-family: "Segoe UI", sans-serif;
}
.input-wrapper {
margin-bottom: 20px;
}
.input-wrapper input {
display: block;
margin-top: 10px;
padding: 10px;
font-family: "Segoe UI";
max-width: 200px;
width: 100%;
}
.input-wrapper input:focus {
outline: none;
border: 1px solid #2a86ff;
}
.form-btn {
display: block;
width: 100%;
max-width: 200px;
padding: 10px 0px;
background: #2a86ff;
color: white;
border: none;
font-family: "Segoe UI";
cursor: pointer;
font-weight: 500;
}
.form-btn:hover {
background: #166cdd;
}
.form-btn:focus {
outline: none;
background: #1a67cc;
}
Sehingga kita akan mendapatkan tampilan akhir seperti ini:
Menampilkan pesan error
Untuk menampilkan pesan error, kita perlu menambahkan satu komponen lagi dibawah elemen input, seperti kode dibawah ini
Letakkan dibawah input email
<small className="error-text">{formik.errors.email}</small>
Letakkan dibawah input password
<small className="error-text">{formik.errors.password}</small>
Tambahkan .error-text pada styles.css
.error-text {
color: #e92424;
}
Untuk melakukan test kalian bisa langsung klik tombolnya untuk menampilkan pesan error. Jika kalian tidak menginputkan data dengan benar maka akan muncul seperti gambar dibawah
Yeay, kita udah berhasil membuat client side validation pada aplikasi kita, untuk melakukan validasi yang lain kalian bisa explore dokumentasi yup ya.
Bonus! Minimal Character dan Pesan Error Custom
Untuk melakukan validasi minimal character kita bisa menambahkan kode seperti ini
validationSchema: Yup.object({
email: Yup.string().required().email(),
password: Yup.string().required().min(8)
})
bisa dilihat setelah required() kita menambahkan min(8), artinya password hanya boleh dikirim dengan minimal 8 karakter.
Untuk menambahkan pesan error custom, kita bisa langsung menambahkan string sebagai parameter.
validationSchema: Yup.object({
email: Yup.string()
.required("Oops, kamu belum ngisi email")
.email("Emailnya ga valid nih!!"),
password: Yup.string()
.required("Oops lupa ngisi password ya")
.min(8, "Password minimal 8 karakter")
})
Yap, akhirnya selesai juga nih artikel, semoga tutorial nya bermanfaat ya. Kalo kalian suka dengan artikel seperti ini jangan lupa pantengin trus blog.birunidev.com ya, biar kamu dapet tutorial teknis frontend yang lengkap dan mudah dimengerti.
Sekian dari saya, sebarkan artikel ini ke temen-temen kalian biar kita bisa pinter bareng. Terimakasih dan sampai jumpa.
إرسال تعليق
Kalo ada pertanyaan atau request bisa langsung komen disini ya