Membuat Validasi Laravel dan Vue.js

Membuat validasi adalah pilihan yang tepat untuk memberitahu kepada pengguna yang ingin memasukan data yang baru, pembaruan, penghapusan, atau lainnya. Akan tetapi Anda hanya membuat validasi pada daftar (form) saja, ada beberapa bonus sedikit unik untuk dipelajari.

Daftar isi:

Menambah pesan validasi

Saatnya Anda menambahkan validasi di setiap bidang pada form baik di berkas create.vue dan edit.vue, cara membuatnya cukup mudah. Perhatikan skrip berikuti ini apa yang saya tambahkan.

<div class="field">
    <label for="name" class="label">Nama Lengkap</label>
    <div class="control">
        <input v-model="form.name" type="text" name="name" id="name" 
            :class="['input', {
                'is-danger': errors.name
            }]"
        >
    </div>
    <p v-if="errors.name" class="help is-danger">{{errors.name[0]}}</p>
</div>

Jadi Anda cukup menyesuaikan skrip diatas pada masing-masing bidang pada kedua form yang ada. Jangan khawatir, itu bisa dilakukan dengan mudah.

Selanjutnya buatlah variabel errors = {} pada metode data() seperti dibawah ini dan lakukan hal yang sama pada berkas create.vue dan edit.vue.

data() {
    return {
        ...

        errors: {}
    }
}

Jangan lupa juga untuk menambahkan beberapa skrip di fungsi submit() seperti dibawah ini dan lakukan hal yang sama seperti cara diatas.

methods: {
    submit() {
        this.errors = {}

        ...

        .catch(({ response }) => {
            this.errors = response.data.errors
        })
    }
}

Jika Anda masih bingung bagaimana hal ini terjadi, Anda bisa melihatnya langsung pada repositori:

Menambahkan skrip di controller

Pada bagian ini Anda hanya melakukan beberapa penambahan skrip pada berkas UserController.php.

Fungsi store()

Jadi setelah Anda menambahkan skrip validasi pada fungsi store(), apabila terdapat email yang sudah terdaftar dan konfigurasi kata sandi tidak sesuai maka akan menampilkan pesan notifikasi.

public function store(Request $request)
{
    $request->validate([
        'name' => 'required',
        'email' => 'required|unique:users,email',
        'password' => 'required|min:6|confirmed',
        'password_confirmation' => 'required|min:6'
    ]);

    ...
}

Fungsi update()

Pada kasus ini skrip validasi tampil beda bukan berarti sama dengan yang diatas, hal ini saya lakukan karena pada form edit terdapat opsi ganti atau tidak kata sandi. Perhatikan perintah if jika variabel password kosong maka akan menghapus variabel tersebut, jika (else) tidak maka akan menambahkan skrip validasi pada terhadap variabel password dan password_confirmation.

public function update(Request $request, $id)
{
    $data = [
        'name' => 'required',
        'email' => 'required|unique:users,email,' . $id
    ];

    if (is_null($request->password)) {
        $request->replace($request->except(['password']));
    } else {
        $data += [
            'password' => 'required|min:6|confirmed',
            'password_confirmation' => 'required|min:6'
        ];
    }
    
    $request->validate($data);

    ...
}

Mungkin Anda akan bertanya kenapa pada baris validasi email ditambahkan variabel $id, hal itu dilakukan jika email yang pengguna miliki masih sama maka tidak akan di validasi. Kalau beda atau melakukan perubahan email maka akan di cek email yang baru tersebut ada atau tidak. Jika ada akan mengambalikan nilai true dan false jika sebaliknya, nilai true akan memberikan validasi email sudah ada yaaa!.

Bonus

Validasi permintaan email

Agar validasi email makin sensitif Anda bisa menambahkan regex untuk melakukan validasi terhadap format email. Jika pengguna memasukan format email tidak valid maka akan memberikan pesan notifikasi format email tidak valid. Tambahkan skrip berikut pada variabel email.

'...|regex:/(.+)@(.+)\.(.+)/i'

Mengubah bahasa pesan validasi

Saya sudah pernah membahas bagaimana mengubah bahasa bawaan Laravel (English) menjadi bahasa yang Anda cintai yaitu Bahasa Indonesia. Tentu itu hal yang bagus untuk diterapkan pada aplikasi Laravel Anda, berikut tutorial yang bisa Anda lihat lebih lanjut. Baca juga: Konfigurasi Dasar Laravel