hifiveのフォームのバリデーションを使ってみよう

hifive 1.2の新機能、FormControllerの使い方を紹介します。

まずデモとして次のようなフォームがあります。このフォームには様々なバリデーション条件がセットしてあります。

https://www.htmlhifive.com/ja/tutorial/validation/

そして画面下部の送信ボタンを押すと、検証結果が表示されます。幾つもエラーが出ていて、そのエラー内容や理由が表示されます。

では実際に検証の方法なのですが、HTMLのdata要素を使って設定できます。

例えば必須指定は以下になります。

<input name="name" type="text" class="form-control" placeholder="名前" data-required />

入力パターン（メールアドレスなど）は次のようになります。

<input name="email" type="text" placeholder="[email protected]" class="form-control" data-required data-pattern=".+@.+" />

数字の入力範囲も指定できます。

<input class="form-controls" type="text" form="form1" name="num0to10" value="0" data-min="[0,true]" data-max="10">

文字数指定は次のように行います。

<input name="pass" type="password" class="form-control" placeholder="Password" data-required data-size="[8,16]" />

そして、実際の入力チェックはJavaScriptを使って次のように行います。機能はもう少しありますが、最低限にしてあります。

var pageController = {
    __name: 'sample.PageController', 

    _formController: h5.ui.FormController,
    __meta: {
        _formController: {
            rootElement: '#form1'
        }
    }
};

_formControllerにh5.ui.FormControllerを指定するのが重要です。そして、__metaにて_formControllerで用いるルートエレメントを指定します。#form1と指定していますので、HTML側でも次のように記述します。

<form id="form1">
  :
</form>

form内にtype=”submit”のボタンがある場合、ボタンをクリックすると、自動で前述のdata要素で指定した条件に従って入力値チェックを行ってくれます。

他にも、プラグインを指定してエラーの表示方法を変えたり、メッセージを指定したりすることができます。

入力値はサーバ側でも必須ですが、まずJavaScript側でチェックしてしまえば重たいファイルアップロード処理が省けたり、UXも向上します。ぜひ使いこなしてください。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive