<!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 も指定できるらしいけど、それはやり過ぎかな