vue.jsでHTML5 Form validationの利用

目的

vue.jsでSPAページの構築時、submitせずにHTML5 Form validationを利用

方法

<form id="form" @submit.prevent="">
  <input type="text" required />
  <button @click="update" />
</form>

• buttonのclick eventは、formタグに伝播させる
• formタグでは、click eventは受け付けるが、submit eventはpreventで処理させない
  • formタグでのclick event受付時にHTML5 Form validationが実施される
  • validationの実行結果に問題なければ、formタグでsubmit eventが発行されるのでprevent

export default {
  methods: {
    update () {
      const form = document.getElementById('form');
      if (!form.checkValidity()) return;
      // 以降、省略
      // API request && 画面遷移処理 etc..
    }
  }
}

• checkValidity()の結果に従って処理の実施可否を判定

備考

• Form上でのEnter Key実行は、buttonタグのclick eventと解釈され、@clickの処理が実施される
• Safari / Chromeでの動作確認はしたが、それ以外のブラウザでの動作検証は未達