Vue 2を使用したクライアント側フォーム検証

Question

Laravel 5.3とVue 2でアプリケーションを開発していますVue 2でform-validationを実装しましたが、クライアント側のエラーの要求をチェックしません。サーバーに送信され、その後、戻ってサーバから送信されたエラーを表示し、次のようにあなたは私のコード

class Form { 
    constructor(data) { 
     this.originalData = data; 

     for (let field in data) { 
      this[field] = data[field]; 
     } 

     this.errors = new Errors(); 
    } 

    data() { 
     let data = {}; 
     for (let property in this.originalData) { 
      data[property] = this[property]; 
     } 

     return data; 
    } 

    reset() { 
     for (let field in this.originalData) { 
      this[field] = ''; 
     } 

     this.errors.clear(); 
    } 

    post(url) { 
     return this.submit('post', url); 
    } 


    submit(requestType, url) { 
     return new Promise((resolve, reject) => { 
      axios[requestType](url, this.data()) 
       .then(response => { 
        this.onSuccess(response.data); 
        resolve(response.data); 
       }) 
       .catch(error => { 
        this.onFail(error.response.data); 
        reject(error.response.data); 
       }); 
     }); 
    } 

    onSuccess(data) { 
     alert(data.message); 

     this.reset(); 
    } 

    onFail(errors) { 
     this.errors.record(errors); 
    } 
} 

を見つけることができますし、これは

` `new Vue({ 
     el: "#form", 
     data: { 
      form: new Form({ 
       name: '', 
       description: '' 
      }) 
     }, 
     methods: { 
      onSubmit() { 
       this.form.post('/admin/category'); 
       //.then(response => alert('Item created successfully.')); 
       //.catch(errors => console.log(errors)); 
      }, 

      onSuccess(response) { 
       alert(response.data.message); 

       form.reset(); 
      } 
     } 
    });` 

`Vueのクラスであり、これは私のHTML form

<form method="post" id="form" action="{{ url('admin/category') }}" ' 
@submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)"> 
        {{ csrf_field() }} 


      <div class="form-group"> 
        <label for="name">Name</label> 
        <input type="text" class="form-control" id="name" name="name" 
v-model="form.name" placeholder="Name"> 
        <span class="help is-danger" 
    v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span> 
       </div> 
       <div class="form-group"> 
        <label for="description">Description</label> 
        <textarea class="form-control" id="description" name="description" 
v-model="form.description" placeholder="Description"></textarea> 


        <span class="help is-danger" 
    v-if="form.errors.has('description')" 
    v-text="form.errors.get('description')"></span> 
       </div> 
       <button type="submit" class="btn btn-default" :disabled="form.errors.any()">Create New Category</button> 
      </form> 

質問： 私は最初にそれがクライアント側でチェックし、それが見つかった場合は何らかのエラーがにすべての単一のリクエストをさせないサーバーに送信され、要求を防ぐ方法でコードを変更する必要がありますサーバーに送信されたエラーを表示します。

Answer 1

フォームを送信する直前に、クライアントクラスの検証を任意のタイプで使用できます。フォームの送信前に、フォームクラスからデータを取得して検証できます。バニラのjavascriptまたはその他の検証ライブラリ。

のは、一例としてvalidate.jsを使用してみましょう：

onSubmit() { 

//get all the fields 
let formData = this.form.data(); 

//setup the constraints for validate.js 
var constraints = { 
    name: { 
    presence: true 
    }, 
    description: { 
    presence: true 
    } 
}; 

//validate the fields 
validate(formData, constraints); //you can use this promise to catch errors 

//then submit the form to the server 
this.form.post('/admin/category'); 
    //.then(response => alert('Item created successfully.')); 
    //.catch(errors => console.log(errors)); 
}, 

：あなたが行うことができますあなたのonSubmitメソッドで