HTML5のフォームバリデーションをSPAの中で使う方法
最近、素のHTMLやCSSをなるべく活用することに興味があります。
こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。
※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。
今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。
課題
HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。
でも、SPAではformをsubmitしません。
どうしましょう...
解決策
form.reportValidity() を使います。
これは、submitせずにバリデーションだけをかけるためのメソッドです。
※2020年7月時点のMDNによれば、IE以外の全ての主要ブラウザでサポートされているようです。安心して使えますね。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
コード例
VInputItem.vue
<template>
<form>
<label>
数量
</label>
<input
type="number"
v-model="quantity"
min="0"
max="999"
@chenge="onChengeInput"
/>
</form>
</template>
<script>
export default {
data() {
return {
unitprice: 0,
quantity: 0,
}
},
methods: {
onChangeInput(event){
this.$el.reportValidity()
},
},
}
</script>
ポイント
<template>
<form>
<label>
数量
</label>
<input
type="number"
v-model="quantity"
min="0"
max="999"
@chenge="onChengeInput"
/>
</form>
</template>
<script>
export default {
data() {
return {
unitprice: 0,
quantity: 0,
}
},
methods: {
onChangeInput(event){
this.$el.reportValidity()
},
},
}
</script>
この例では、直近のform要素を取得するために$el
を使っています。
$el
はVue.jsでルート要素を取得するためのプロパティです。
このサンプルコンポーネントでは、template直下のルート要素がformなので、それを一発で取得できています。
※コンポーネント内の要素の構造によっては、$refs
を用いて参照する方法もあると思います。
Author And Source
この問題について(HTML5のフォームバリデーションをSPAの中で使う方法), 我々は、より多くの情報をここで見つけました https://qiita.com/shozzy/items/219bab3c4021bd4ce417著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .