Laravel: Cara Validasi Form Menggunakan Ajax

Validasi data merupakan bagian yang sangat penting dalam pembuatan aplikasi. Bahkan pada sebuah panduan pengembangan WordPress disebutkan sangking pentingnya bagian validasi ini sampai-sampai kita tidak boleh mempercayai pengguna meskipun dia adalah sahabat karib kita sendiri.

Secara umum kelas Validator dari Facade laravel akan menampilkan kesalahan validasi dalam bentuk array object. Semua kesalahan akan ditampilkan secara bersamaan. Apabila kita ingin menampilkan pesan kesalahan satu persatu pada user maka kita perlu memformat ulang pesan kesalahan tersebut.

Pada catatan kali ini, aku ingin membuat validasi form hanya menampilkan kesalahan yang paling atas saja. Misalnya ada dua pesan kesalahan validasi berupa: bidang nama tidak boleh kosong dan bidang email tidak boleh kosong hanya akan ditampilkan bidang nama tidak boleh kosong saja. untuk itu, pada saat validasi, kita harus mengubah format kesalahan dengan mengambil kesalahan pertama saja.

Membuat Aturan Validasi Form

Hal pertama yang biasanya dilakukan pada proses validasi adalah membuat auran validasi. Pada kesempatan kali ini, conoh aturan validasinya adalah sebagai berikut:

• field name tidak boleh kosong dan harus berupa string
• filed email tidak boleh kosong dan harus berupa string

Maka aturan yang berlaku adalah sebagai berikut:

$rules = [
 'name'  => 'required|string',
 'email' => 'required|string'
]

Mendaftarkan Aturan Validasi

Validasi form field di sini menggunakan instance Validator dari Facade. Sehingga perlu mendeklarasikan penggunakan validator tersebut ke dalam Controller seperti berikut:

use Illuminate\Support\Facades\Validator;

Setelah itu, kita baru bisa mendaftarkan aturan validasi ke dalam instance validator dengan cara berikut:

$validator = Validator::make($request->all(), $rules);

Mengambil Kesalahan Pertama Saja

Sekarang saatnya mengubah format kesalahan menjadi berbentuk string biasa yang diambil dari pesan kesalahan pertama.

//block untuk menghandel jika ada kesalahan validasi
if($validator->fails()){
 //mengambil kesalahan validasi dalam bentuk array
 $err = $validator->getMessageBag()->toArray();
 //mengubah kesalahan menjadi array dengan item tungal
 foreach ($err as $k => $v){
   $err[] = $v;
 }
 //menampilkan response kesalahan dalam bentuk json sederhana
 return response()->json(['msg'=>$err[0]]);
}
//menampilkan response jika tidak ada kesalahan
return response()->json(['msg'=>'valid']);

Menghandel Kesalahan Menggunakan Ajax

Terakhir, bagian validasi yang dilakukan adalah menampilkan kesalahan kepada user. Pada kesempatan kali ini, kesalahan tersebut ditampilkan menggunakan fungsi alert javascript yang dieksekusi setelah ajax request mendapatkan response dari server.

Menggunakan axios:

axios.post('/login', {name: user_name, email: user_email})
 .then(res=>{
  if(res.data.msg==='valid'){
    //menampilkan pesan data valid
    alert('data yang dikirim lolos validasi')
  }else{
    //menampilkan pesan kesalahan dinamis dari server
    alert(res.data.msg)
  }
 })

Menggunakan ajax jquery:

 $.ajax({
           url: "/login",
           method: "post",
           data: {name: user_name, email: user_email},
           dataType: 'json',
           success: function (response) {
              if(res.data.msg==='valid'){
               //menampilkan pesan data valid
               alert('data yang dikirim lolos validasi')
              }else{
               //menampilkan pesan kesalahan dinamis dari server
               alert(res.data.msg)
              }
           }
        })