Webフォームのバリデーションをしてみよう

ユーザが入力したデータはきちんとチェックしなければなりません。システム上、意図しないデータが入力される場合はもちろんのこと、全角と半角の違いやデータベースに格納できるサイズを超えたデータ入力をされるケースもあります。

hifive自身ではバリデーションのクラスはありませんが、jQuery Validateと組み合わせて入力値の検証が可能です。

コントローラ側の実装は次のようになります。

h5.core.controller('body', {
  __name: 'sample.plugin.validationSampleController',
  __ready:function() {
    // バリデーターにルールやメッセージ等を設定
    this.$find('#form1').validate({
    onsubmit: true,    // Submitイベントが実行された場合に、自動でバリデーションを実行するか
    focusCleanup: false,  // フォーカスが当たった場合に現在のエラー内容を一旦クリアするか
    rules: {        // バリデーションルール
      food: {
        required: true
      },
      conf_tobacco: {
        required: true
      },
      :
    },
    messages: {     // エラー時に表示するメッセージ
      food: {
        required: '1つ以上選択して下さい。'
      },
      conf_tobacco: {
        required: '「はい」または「いいえ」のいずれかを選択して下さい'
      },
      :
    },
    errorPlacement: function(error, el) {   // エラーメッセージの表示先を指定する
        el.parent().children('.errorMsg').append(error);
    },
    showErrors: function(errorMap, errorList) {  // エラーがある要素毎に実行するコールバック
        this.defaultShowErrors();
    },
  }),
  highLightArea: function(orgThis, el, error, errorClass) {
    // エラーのある要素の背景色を赤にする
    $(el).css('background-color', 'red');
  },
  :
  invalidHandler: function(orgThis, ev, validator) {
    alert('入力内容に誤りがあります。');
  },
  successHandler: function(orgThis, errMsgElement, inputElement) {
    if (window.console) {
      console.log('入力OK: '+ inputElement.name);
    }
  },
  '[name="food"] click': function(context, $ct) {
    // input[name="food"]の要素に対してバリデーションを実行する
    $ct.valid();
  },
});

上半分はjQuery Validateをそのまま使っていますが、たとえばチェックボックス要素は送信時にのみ入力チェックが可能になっていますので、それを hifive のコントローラでバリデーション処理を実行させています。

'[name="food"] click': function(context, $ct) {
  // input[name="food"]の要素に対してバリデーションを実行する
  $ct.valid();
},

一つのコントローラ内で入力チェック周りの実装が完結するのでメンテナンスもしやすいかと思います。
hifive + jQuery Validation Pluginにてデモが可能です。

もちろんhifiveの入力チェックはクライアントサイドになりますので、サーバサイドは別途入力チェックを行うのが良いでしょう。しかし画面遷移したりすることなくリアルタイムに入力エラーが出せるのでユーザストレスは低く済むはずです。

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