HTML KnockoutJS jQuery Validation Engine と組み合わせて入力検証

2024-12-082024
93.5% (342.5/366)
December
24.2% (7.5/31)
Week 49
93% (6.5/7)
Day 08 Sun
51.5% (12.3/24)

訪問者

total: 9220
today: 1
yesterday: 1
now: 1

↑

更新

MenuBar

これは何?
サンプル・アプリケーション
- View
- Init
- ViewModel
jQuery Validation Engine による入力検証便覧

これは何? †

jQuery Form Validation plugin と knockout.js を組み合わせて使う
- http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
- https://github.com/posabsolute/jQuery-Validation-Engine
Form Submit 時に、簡単な単項目 Validation をする
- ユーザの利便性のため
- サーバ側 (REST API側) の入力チェックはもちろんいるよ。というか、どっちか一つだけならサーバ側のチェック
knockout.js の submit バインドと相性が良い

↑

サンプル・アプリケーション †

↑

View †

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExB_validate.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex11</title>
    <link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-Validation-Engine-2.6.2/validationEngine.jquery.css">
    <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutExB_init.js"></script>
  </head>
  <body>
  	<br/>
  	<br/>
   	<form id="myForm" data-bind="submit: submitFunc">
   		<input type="text" size="40" maxlength="20" data-bind="value: name, uniqueName: true" class="validate[required]"><br/>
   		<input type="reset"/> <input type="submit"/>
   	</form>  
  </body>
</html>

validation Engine の CSS を適用
validation は form に対してかけるので、form に submit バインディングする
検証項目
```
<input type="text" size="40" maxlength="20" data-bind="value: name, uniqueName: true" class="validate[required]">
```
- validation Engine は、name のある要素しか検証しないので uniqueName: true で、knockout.js に一意な name を生成させる
- validation Engine による検証内容は class に validate[] で指定する。ここでは必須指定
- その他の検証項目は次項で整理 → #Validations

↑

Init †

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExB_init.js

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
   // jQuery 1.7～, Query UI 1.11～ は AMD に対応
   'jquery'   : 'jquery-ui-1.11.3/external/jquery/jquery',
   'jqueryui' : 'jquery-ui-1.11.3/jquery-ui.min',
   'validationEngine' : 'jquery-Validation-Engine-2.6.2/jquery.validationEngine',
   'validation' : 'jquery-Validation-Engine-2.6.2/languages/jquery.validationEngine-ja'
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
    'validationEngine' : ['jquery', 'validation'],
    'validation' : ['jquery'],    
  }
});

require(['knockout', 'app/knockoutExB_vmodel', 'jquery', 'validation', 'validationEngine', 'domReady!'],
  function(ko, vmdl, $) {
    ko.applyBindings(new vmdl());
    
    $('#myForm').validationEngine('attach');
  }
);

jquery.validationEngine と jquery.validationEngine-ja を読み込む。AMD に対応していないので shim に指定する
init で、view model のバインディングとともに、form への validation Engine の組み込みを行う
```
$('#myForm').validationEngine('attach');
```
- attach : form への validation Engine の組み込み
- validate : form の検証を行い、エラー箇所にバルーンを表示する。合格なら validationEneing('validate') は true を返す。エラーがあれば false を返す
- hide : form のエラー表示バルーンをすべて隠す
- hideAll : (複数の form があるとき) page 内のエラー表示バルーンをすべて隠す

↑

ViewModel? †

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExB_vmodel.js

/*
 * アプリケーションの View Model.
 */
define(['knockout', 'jquery', 'validation', 'validationEngine'], function(ko,$) {

  return function appViewModel() {
    var self = this;
    self.name = ko.observable();
	self.submitFunc = function (formElement) {
		if ($(formElement).validationEngine('validate') ) {
			alert('Form is valid');
			return false;
		}
		
		alert('Form is invalid');
		return false;
	};
  };
});

form submit 時に、validationEngine('validate') を起動する
- data-bind="submit : submitFunc" で割り付けられた submitFunc(formElement) の引数は form の DOM 要素
検証合格でも不合格でも form を submit (POST) しないなら return false
- 普通は、検証合格なら form の model を Ajax で POST/GET するだろう

↑