フォームの作成で消耗していますか？

Webサイトのフォームは、基本的にはJavaScriptによるバリデーション等の制御をもって作成されている。そして当然、工数に跳ね上がる。つまりフォームの作成は面倒くさい、やりたくないエンジニアは多い。ことSPAになれば、クライアントサイドでバリデーションを行ったあとで、POSTしたデータをサーバーサイドを再検証する。POSTされてきたデータを自画面で捌いて、再描画するような昔の時代なら、HTMLを再構成してPUSHすれば済んだ時代ではなくなった。

それ、HTMLでも制御できますよ？

しかし、一方でVue.jsやReact.jsのようなフレームワークの登場によりとっつきやすくなったフロントエンドは、UI制御すべてがJavaScriptで行わないといけない思いがちである。もちろんそんなことはない。HTMLの規格は常に進化しており、様々なことを実現できるようになっている。簡単なモック程度であるならば、JSではなくブラウザ側に制御を移譲してしまってよいであろう。

頑張らないフォームをVue.jsで作成する

完成目標としては以下のように定める

バリデーションは頑張らない
SPAライクな実装はしたい

HTMLのfrom属性とrequired属性、submit.prevent（ブラウザ挙動によるformのactionを停止）を使用すると実現できる。

<div class="container">
    <form id="app" v-on:submit.prevent="onSubmit">
        <div v-if="status === 0">
            <h1>１番めの入力です！！</h1>
            <input type="text" v-model="text1" required>
            <input type="text" v-model="text2" required>
            <input type="text" v-model="text3" required>
            <input type="text" v-model="text4" required>
            <button>次の入力へ</button>
        </div>
        <div v-else-if="status === 1">
            <h1>２番めの入力です！！</h1>
            <input type="text" v-model="text5" required>
            <input type="text" v-model="text6" required>
            <input type="text" v-model="text7" required>
            <input type="text" v-model="text8" required>
            <button>次の入力へ</button>
        </div>
        <div v-else>
            <h1>入力完了！！</h1>
        </div>
    </form>
</div>

new Vue({
    el: '#app',
    data(){
        return{
            text1 : '',
            text2 : '',
            text3 : '',
            text4 : '',
            text5 : '',
            text6 : '',
            text7 : '',
            text8 : '',
            status: 0
        }
    },
    methods:{
        onSubmit(){
            this.status++;
            window.alert('ok')
        }
    }
})

上記のような実装を行うと、ボタンを押して入力項目に満たない場合は、該当部分にブラウザが定めるツールチップが表示され、すべてを満たせば次の入力項目の画面が切り替わる。

ただし、プロダクションコードとしては適用できません

ただし、上記のコードはUI的にも洗練されておらず、更にSafariではrequiredが有効に機能しないという報告がされている。簡単にモックを作成する手段として、覚えておくとよいであろう。