Membuat Form Input Validasi VueJS




Halo apa kabar teman-teman sekalian. Saya ingin sharing nih tentang validasi form input untuk vuejs, Apakah ini bermanfaat untuk kalean. wah itu tergantung dari kaliannya hehe. Oke pertama kita akan membahas seberapa butuhnya menggunakan validasi untuk project kita.

Kasus yang saya alami yaitu ketika saya membuat form registrasi pasti nya banyak bgt field dengan nama dan input text yang berbeda-beda. Sebelumnya saya mencoba validasi valuenya saja, Dengan cara membuat kondisi IF Else dan itu membuat saya harus mengcopy paste lalu mempersulit saya jika ada tambahan kondisi baru ketika aplikasi sudah komplek(terstruktur).

Oke saya perkenalkan library validasi ini bernama vuelidate, sesuai namanya iya di khususkan untuk VueJs, sebelumnya saya mencoba Vee-validate karena ada beberapa masalah seperti bentrok dengan vuetable, dan versi 2 dari Vee-validate tidak sama dengan versi terbaru yang mengakibatkan harus migrasi. Oke segitu saja cerita-ceritanya lanjut ketutorial.

Instalasi Vuelidate

npm install vuelidate --save


Buka main.js pada project kamu. dan tambahkan kode berikut ini:

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)


Oke library sudah dapat di load, kita lanjut membuat komponen yang berisi input form, contoh komponen dengan nama Komponen.vue . Buat fungsi javascript seperti dibawah ini


contoh diatas kode javascript untuk mengimport library vuelidate, membuat sebuah data state pada komponen, dan membuat/mendeklarasi validations pada komponen. Kita menambahkan required yang bertujuan agar Field Input tidak kosong dan menambahkan minLength untuk memberikan minimum pengisian Field input.

Lalu buat form html nya, contoh seperti dibawah ini:



Berhasil deh form input sudah otomatis bisa di validasi. sekarang tinggal tambahin sebuah function untuk onclick atau function yang akan digunakan untuk mengirim data.

<div @click="submitbtn">Send Data</div>

Buat function onclick untuk validasi,

 methods: {
  submitbtn() {
    this.$v.touch();
    if (this.$v.$error){
       alert("gagal kirim")
    }else{
       alert("terkirim")
    }
  }
}


Validasi untuk mengirim data ke dalam server sekarang dah divalidasi. sebelum dikirim sudah diperiksa oleh fungsi touch() jadi bakal muncul pesan error jika field input kosong. Jika masih ada yang kurang jelas dibawah ini kode lengkapnya.




Tutorial ini dibuat untuk validasi form yang menggunakan onclick .Untuk yang menggunakan onsubmit dengan tag <form></form> agak berbeda dengan tutorial ini, bisa langsung kunjungi doc resmi nya: https://vuelidate.js.org/#sub-basic-form . Yapp itu saja yang bisa saya sampaikan silahkan berkomentar jika ada yang ingin ditanyakan terima kasih.. Happy Coding
Kategori :
Facebook twitter Google

Related Post

Berlangganan update artikel terbaru via email:

0 Komentar