JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script src="https://cdn.rawgit.com/Knockout-Contrib/Knockout-Validation/master/dist/knockout.validation.js"></script>
<pre data-bind="text: ko.toJSON($data, null, 2);"></pre>
<input type="email" required="true" data-bind="textInput: email"/>
CSS
.validationElement {
border: 1px solid red;
}
.validationMessage {
color: red;
}
JavaScript
//
// 1. Run the example and notice the input does not enforce any validation rule.
//
// 2. Remove knockout.validation from External References to allow the following script
// to execute. You'll notice the input element will correctly have validationMessage
// and validationElement bindings applied.
//
if (!ko.validation) {
/*=============================================================================
Author: Eric M. Barnard - @ericmbarnard
License: MIT (http://opensource.org/licenses/mit-license.php)
Description: Validation Library for KnockoutJS
Version: 2.0.0
===============================================================================
*/
/*globals require: false, exports: false, define: false, ko: false */
(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 new Error('Knockout is required, please ensure it is loaded before loading this validation plug-in');
}
// create our namespace object
ko.validation = exports;
var kv = ko.validation,
koUtils = ko.utils,
unwrap = koUtils.unwrapObservable,
forEach = koUtils.arrayForEach,
extend = koUtils.extend;
;/*global ko: false*/
var defaults = {
registerExtenders: true,
messagesOnModified: true,
errorsAsTitle: true, // enables/disables showing of errors as title attribute of the target element.
errorsAsTitleOnModified: false, // shows the error when hovering the...