![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS jQuery Validation Engine と組み合わせて入力検証 |
<!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><input type="text" size="40" maxlength="20" data-bind="value: name, uniqueName: true" class="validate[required]">
/*
* アプリケーションのイニシャライザ.
*/
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');
}
);$('#myForm').validationEngine('attach');
/*
* アプリケーションの 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;
};
};
});source : https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExC_validate.html
この他に ajax も指定できるらしいけど、それはやり過ぎかな
