Membuat Blog dengan Laravel & VueJS - #8 | Validasi

whynwd

whynwd Jumat, 13 September 2019

Membuat Blog dengan Laravel & VueJS - #8 | Validasi

Setelah kita membuat respon berupa pesan yang akan muncul saat setelah data value berhasil terkirim, kita lanjutkan dengan membuat validasi yang akan menampilkan pesan/keterangan error ketika formulir atau value kosong.

Jadi ketika akan membuat pos baru, value tidak boleh kosong.  Apabila data value masih kosong maka akan muncul keterangan pada form.

Baiklah..Kita akan langsung mulai mengerjakannya.

Pertama kita buka PostController.php pada direktori app/Http/Controllers.

Pada PostController.php kita akan menambahkan validasi dengan menggunakan fitur yang disediakan laravel untuk proses validasi yang akan kita buat di method store.
//PostController.php
...
public function store(Request $request)
 { 
    $request->validate([
      'title' =>  'required',
      'body' =>  'required', 
    ]);

    $post = new Post;
    $post->user_id = $request->user_id;
    $post->title = $request->title; 
    $post->body = $request->body; 
    $post->save();

    return $post;
}
...
Selanjutnya kita buka komponen CreatePost.vue di direktori resources/js/components.

Pada komponen CreatePost.vue kita buat elemen dibawah ini pada form:
//CreatePost.vue
<span v-if="errors.title" class="badge badge-danger">
    {{ errors.title[0] }}
</span>

<span v-if="errors.body" class="badge badge-danger"> 
    {{ errors.body[0] }} 
</span>
Kita membuat elemen span dengan directive beserta class di dalamnya untuk menampilkan pesan error dengan keterangan yang sesuai dengan syarat yang kita buat untuk validasi.

Setelah itu kita tambahkan properti dan membuat permintaan untuk diperiksa pada axios.
...
data:function() {
  return { 
      successful: false,
      errors: [], 
    };
  },
...
...
axios.post("/api/posts", formData)
  .then(response => {
      this.successful = true; 
      console.log(response.data);
  }) 
  .catch(error => { 
    if((error.response.status = 422 )){
      console.log(error.response.data);
      this.errors = error.response.data.errors;
    }
  });
...
Validasi yang kita buat adalah untuk memberi pemberitahuan kesalahan sesuai pesan errornya jika terdapat value yang kosong di semua form inputan atau salah satunya.

Hasil akhir CreatePost.vue:
//CreatePost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Create New Post</div>
  
    <span v-if="successful" class="label label-success">
      <h4>Saved Successfully!</h4>
      <small>(Post baru berhasil dibuat dan dipublikasi!)</small>
    </span>

      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <span v-if="errors.title" class="badge badge-danger">{{errors.title[0]}}</span>
            <input type="title" class="form-control" ref="title" id="title" placeholder="Title">
          </div> 
          <div class="form-group">
            <span v-if="errors.body" class="badge badge-danger">{{errors.body[0]}}</span>
            <textarea class="form-control" id="body" ref="body" placeholder="Body" rows="8"></textarea>
          </div>
          <button type="submit" @click.prevent="create" class="btn btn-primary">
            Submit
          </button>   
        </form><br><br><br>
      </div>
    </div>
</template>

<script>
  export default{
    props:{
      userId:{
        type: Number,
        required : true
      }
    },
    data:function(){
      return{
        successful: false,
        errors:[]
      }
    },
    methods:{
      create(){
        const formData = new FormData();
        formData.append('title', this.$refs.title.value);
        formData.append('body', this.$refs.body.value);
        formData.append('user_id', this.userId);

        axios.post('/api/posts', formData)
          .then(response => {
            console.log(response.data);
            this.successful = true;
          })
          .catch(error => {
            if((error.response.status = 422 )){
            console.log(error.response.data);
            this.errors = error.response.data.errors;
            }
          });
          this.$refs.title.value = "";
          this.$refs.body.value = "";
      }
    }

  }
</script>

<style scoped>
  .label-success{
    background-color: #4fca6b;
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 8px 15px;
  }
  .label-success h4{
    margin-bottom: 0;
  }
</style>
Jika dilihat, hasilnya seperti gambar dibawah ini. Silahkan klik submit dengan value title dan body dikosongkan.

Membuat Blog dengan Laravel & VueJS - #8 | Validasi


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel