hifive開発者ブログコンテンツへスキップFollow:RSSTwitterhifive開発者ブログWebクライアント開発プラットフォーム「hifive」の開発者ブログです。1.2の新機能、FormControllerの使い方を紹介します。デモとして次のようなフォームがあります。このフォームには様々なバリデーション条件がセットしてあります。https://www.htmlhifive.com/ja/tutorial/validation/そして画面下部の送信ボタンを押すと、検証結果が表示されます。幾つもエラーが出ていて、そのエラー内容や理由が表示されます。実際に検証の方法なのですが、HTMLのdata要素を使って設定できます。必須指定は以下になります。/>入力パターン(メールアドレスなど)は次のようになります。/>数字の入力範囲も指定できます。data-max="10">文字数指定は次のように行います。/>そして、実際の入力チェックはJavaScriptを使って次のように行います。機能はもう少しありますが、最低限にしてあります。}};_formControllerにh5.ui.FormControllerを指定するのが重要です。__metaにて_formControllerで用いるルートエレメントを指定します。#form1と指定していますので、HTML側でも次のように記述します。:</form>form内にtype=”submit”のボタンがある場合、ボタンをクリックすると、自動で前述のdata要素で指定した条件に従って入力値チェックを行ってくれます。他にも、プラグインを指定してエラーの表示方法を変えたり、メッセージを指定したりすることができます。入力値はサーバ側でも必須ですが、まずJavaScript側でチェックしてしまえば重たいファイルアップロード処理が省けたり、UXも向上します。使いこなしてください。HTML5コメントは受け付けていません。Blog.投稿先:キャンセル%d人のブロガーが「いいね」をつけました。