Vue.jsでHTML5の標準バリデーション属性をバインドする方法

概要

HTML5の標準バリデーションのON / OFFをVue.jsのバインドで操作する方法が、明示的に記載されてる記事がネット上に見つからなかったのでここにメモしておきます📝 developer.mozilla.org

やりたいこと

• 住所1(市区町村) と 住所2(番地・建物名) それぞれの入力欄があるフォームで 2つとも未入力の場合は有効だが、いずれかの入力があり、片方が未入力だった場合にバリデーションを発火させたい。
• 住所2(番地・建物名) に入力があった場合、 半角整数(0-9) か 全角整数(０-９) のパターンに当てはまる値が入っていないと無効な値として扱う。

やり方

※CodePenに書いてるコードベースで説明します！

住所1(市区町村)

• :required="!!番地" で 住所2(番地・建物名)の値が入力されていた場合のみ必須になるように required をバインド

住所2(番地・建物名)

• :required="!!市区町村" で 住所1(市区町村) の値が入力されていた場合のみ必須になるように required をバインド

<div id="app">
  <form @submit.prevent="saveAddress">
    <div class="form">
      <dd class="form_list_input">
        <ul class="form_contents_list">
          <li>
            <label>住所1</label>
            <input
              v-model="city"
              :required="!!houseNumber"
              class="form_input short"
              type="text"
              placeholder="市区町村"
              autocomplete="address-level2"
              @keydown.enter.prevent="false"
            >
          </li>
          <li>
            <label>住所2</label>
            <input
              v-model="houseNumber"
              :required="!!city"
              pattern="^.*(?:[０-９0-9]).*$"
              class="form_input long"
              type="text"
              placeholder="番地・建物名など"
              title="数字が入力されていません。"
              autocomplete="address-level3"
              @keydown.enter.prevent="false"
            >
          </li>
          <div class="btn_wrapper">
            <button class="btn">保存する</button>
          </div>
        </ul>
      </dd>
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

new Vue({
  el: '#app',
  data: {
    city: '',
    houseNumber: ''
  },
  methods: {
    saveAddress: function() {
      axios.post({
        address: {
          city: this.city,
          houseNumber: this.houseNumber
        }
      }).then(function() {
        // 何らかの処理
      })
    }
  }
})

今回のCodePen

codepen.io