前回までの状況はこちら。

【Laravel】【ホテル予約管理】忘れていた機能を追加する

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/hotel-mng

Vue.jsを使用する前はRequestにバリデーション処理を行っていましたが、Vue.jsを使用してからは、一切使用されていませんでした。

当然、このままではよろしくないので、パラメータをチェックするバリデーション処理を追加します。

やることは単純で、パラメータに値が入っているかどうかだけを確認します。

            validate: function(){
                var ret = true;
                this.errors = [];
                if(this.contents.id == 0) {
                    this.errors.push("ユーザーが選択されていません");
                    ret = false;
                }
                if(this.contents.num == 0) {
                    this.errors.push("人数が選択されていません");
                    ret = false;
                }
                if(this.contents.roomid == 0) {
                    this.errors.push("部屋が選択されていません");
                    ret = false;
                }
                if(this.contents.days == 0) {
                    this.errors.push("宿泊日数が入力されていません");
                    ret = false;
                }
                if(this.contents.start_day == "") {
                    this.errors.push("宿泊日が入力されていません");
                    ret = false;
                }
                if(this.contents.checkout == "") {
                    this.errors.push("チェックアウト時刻が入力されていません");
                    ret = false;
                }
                return ret;
            },

            regist: function() {
                if(this.validate() == false){
                    this.error_flg = true;
                    return;
                }
                var self = this;
                this.param.contents = this.contents;
                axios.post('/api/add', this.param).then(function(response){
                    document.location = "/management";
                }).catch(function(error){
                    self.error_flg = true;
                    self.error_message = error.response.data.errors;
                    console.log("失敗しました");
                });
            },

        <p v-if="error_flg == true" class="error">
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </p>

チェックに引っかかった項目をすべてerrorsにpushして、error_flg=trueとすることで、その内容をリストで表示します。

おなじ処理を編集画面にも実装します。

うまく動きました。