Bootstrapを使ったvue.jsのフォームバリデーション

はじめに

vue.jsを勉強し始めたばかりですが、動くものを作っているとやはり見た目は綺麗にしておきたいと思い、Bootstrapを入れてみました。今回はフォームバリデーション周りを扱ってみたいと思います。

バージョン

• Bootstrap(4.0.0)
• vue.js(2.4.2)

Bootstrapのリンク

まず、htmlにリンクを記載する。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

サンプル

<form :class="[ 'mx-auto' , { 'was-validated' : !isFormValid } ]"  id="mainForm">
      <input type="email"  v-model.trim="mail" class="form-control" id="mailInput" name="mail">
      <input id="submit" type="button" name="submit" value="作成" v-on:click="addTodo" class="btn btn-primary btn-block" :disabled=isNoInput>
</form>
<script>
export default {
  data () {
    return {
      isFormValid: true
    }
  },
  methods: {
    addTodo: function () {
      const formho = document.getElementById('mainForm')

      if (!formho.checkValidity()) {
        this.isFormValid = false
      } else {
        this.isFormValid = true
      }
    }
  }
}
</script>

バリデーションエラー時に<form>タグに'was-validated'クラスを挿入

###vueのv−bindを使って'was-validated'クラスを動的に設定

<form :class="[ 'mx-auto' , { 'was-validated' : !isFormValid } ]"  style="width: 300px;" id="mainForm">

ここに記載しているisFormValidはフォームのsubmit後のバリデーション結果を返すようにしています。

上記のaddTodoメソッドは以下のsubmitボタンで起動するようにしています。

<input type="button" value="作成" v-on:click="addTodo" class="btn" >

###'was-validated'クラスの役割

'was-validated'はBootstrapのクラスで、バリデーションチェックでエラーがあった際に<form>タグに設定すると、バリデーションエラーとなった<input>の枠の色を赤く、エラーがない箇所は緑色にします。
ここでのポイントは、<input>タグにclassを追加するにではなく、<form>タグに追加することです。なぜかというと、Bootstrapの内部cssは以下のように、子孫セレクタで指定しているからです。

.was-validated .form-control:invalid {
　　　　　　　　border-color: #dc3545;
}
.was-validated .form-control:valid {
　　　　　　　　border-color: #28a745;
}

###HTML５のバリデーション
バリデーションに失敗した<input>タグには擬似クラスである:invalidが付与されます。成功した場合は:validが付与されます。この擬似クラスを元に、Bootstrapは<input>の枠の色をつけています。