KNOCKOUT VALIDATION
HTML
<script id="customMessageTemplate" type="text/html">
<em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
<legend>User: <span data-bind='text: errors().length'></span> errors</legend>
<label>First name: <input data-bind='value: firstName'/></label>
<label>Last name: <input data-bind='value: lastName'/></label>
<div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
<label>Email: <input data-bind='value: emailAddress' required pattern="@"/></label>
<label>Location: <input data-bind='value: location'/></label>
<label>Age: <input data-bind='value: age' required/></label>
</div>
<label>
Subscriptions:
<select data-bind='value: subscription, options: subscriptionOptions, optionsCaption: "Choose one..."'></select>
</label>
<label>Password: <input data-bind='value: password' type="password"/></label>
<label>Retype password: <input data-bind='value: confirmPassword' type="password"/></label>
<label>10 + 1 = <input data-bind='value: captcha'/></label>
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>
<br />
<br />
<button type="button" data-bind='click: requireLocation'>Make 'Location' required</button>
CSS
label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }
JavaScript
/*
===============================================================================
Author: Eric M. Barnard - @ericmbarnard
License: MIT (http://opensource.org/licenses/mit-license.php)
Description: Validation Library for KnockoutJS
===============================================================================
*/
(function (factory) {
// Module systems magic dance.
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
// CommonJS or Node: hard-coded dependency on "knockout"
factory(require("knockout"), exports);
} else if (typeof define === "function" && define["amd"]) {
// AMD anonymous module with hard-coded dependency on "knockout"
define(["knockout", "exports"], factory);
} else {
// <script> tag: use the global `ko` object, attaching a `mapping` property
factory(ko, ko.validation = {});
}
}(function ( ko, exports ) {
if (typeof (ko) === undefined) { throw 'Knockout is required, please ensure it is loaded before loading this validation plug-in'; }
var defaults = {
registerExtenders: true,
messagesOnModified: true,
errorsAsTitleOnModified: false, // shows the error when hovering the input field (decorateElement must be true)
messageTemplate: null,
insertMessages: true, // automatically inserts validation messages as <span></span>
parseInputAttributes: false, // parses the HTML5 validation attribute from a form element and adds that to the object
writeInputAttributes: false, // adds HTML5 input validation attributes to form elements that ko observable's are bound to
decorateElement: false, // false to keep backward compatibility
errorClass: null, // single class...