Implemented throttling for validation and made few optimizations

Src/bindingHandlers.js

@@ -6,35 +6,36 @@ ko.bindingHandlers['validationCore'] = (function () {
  return {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  var config = ko.validation.utils.getConfigOptions(element);
+ var observable = valueAccessor();
 
  // parse html5 input validation attributes, optional feature
  if (config.parseInputAttributes) {
  ko.validation.utils.async(function () { ko.validation.parseInputValidationAttributes(element, valueAccessor); });
  }
 
  // if requested insert message element and apply bindings
- if (config.insertMessages && ko.validation.utils.isValidatable(valueAccessor())) {
+ if (config.insertMessages && ko.validation.utils.isValidatable(observable)) {
 
  // insert the <span></span>
  var validationMessageElement = ko.validation.insertValidationMessage(element);
 
  // if we're told to use a template, make sure that gets rendered
  if (config.messageTemplate) {
- ko.renderTemplate(config.messageTemplate, { field: valueAccessor() }, null, validationMessageElement, 'replaceNode');
+ ko.renderTemplate(config.messageTemplate, { field: observable }, null, validationMessageElement, 'replaceNode');
  } else {
- ko.applyBindingsToNode(validationMessageElement, { validationMessage: valueAccessor() });
+ ko.applyBindingsToNode(validationMessageElement, { validationMessage: observable });
  }
  }
 
  // write the html5 attributes if indicated by the config
- if (config.writeInputAttributes && ko.validation.utils.isValidatable(valueAccessor())) {
+ if (config.writeInputAttributes && ko.validation.utils.isValidatable(observable)) {
 
  ko.validation.writeInputValidationAttributes(element, valueAccessor);
  }
 
  // if requested, add binding to decorate element
- if (config.decorateElement && ko.validation.utils.isValidatable(valueAccessor())) {
- ko.applyBindingsToNode(element, { validationElement: valueAccessor() });
+ if (config.decorateElement && ko.validation.utils.isValidatable(observable)) {
+ ko.applyBindingsToNode(element, { validationElement: observable });
  }
  },
 

Src/configuration.js

@@ -17,6 +17,9 @@ var defaults = {
  grouping: {
  deep: false, //by default grouping is shallow
  observable: true //and using observables
+ },
+ validate: {
+ // throttle: 10
  }
 };
 
@@ -30,4 +33,4 @@ configuration.reset = function () {
  ko.utils.extend(configuration, defaults);
 };
 
-ko.validation.configuration = configuration;
+ko.validation.configuration = configuration;

Src/extenders.js

@@ -27,8 +27,20 @@ ko.extenders['validation'] = function (observable, rules) { // allow single rule
 //
 // 2. test.extend({validatable: false});
 // this will remove the validation properties from the Observable object should you need to do that.
-ko.extenders['validatable'] = function (observable, enable) {
- if (enable && !ko.validation.utils.isValidatable(observable)) {
+ko.extenders['validatable'] = function (observable, options) {
+ if (!ko.validation.utils.isObject(options)) {
+ options = { enable: options };
+ }
+
+ if (!('enable' in options)) {
+ options.enable = true;
+ }
+
+ if (options.enable && !ko.validation.utils.isValidatable(observable)) {
+ var config = ko.validation.configuration.validate || {};
+ var validationOptions = {
+ throttleEvaluation : options.throttle || config.throttle
+ };
 
  observable.error = ko.observable(null); // holds the error message, we only need one since we stop processing validators when one is invalid
 
@@ -46,21 +58,8 @@ ko.extenders['validatable'] = function (observable, enable) {
 
  observable.isModified = ko.observable(false);
 
- // we use a computed here to ensure that anytime a dependency changes, the
- // validation logic evaluates
- var h_obsValidationTrigger = ko.computed(function () {
- var obs = observable(),
- ruleContexts = observable.rules();
-
- ko.validation.validateObservable(observable);
-
- return true;
- });
-
  // a semi-protected observable
- observable.isValid = ko.computed(function () {
- return observable.__valid__();
- });
+ observable.isValid = ko.computed(observable.__valid__);
 
  //manually set error state
  observable.setError = function (error) {
@@ -79,6 +78,21 @@ ko.extenders['validatable'] = function (observable, enable) {
  observable.isModified(true);
  });
 
+ // we use a computed here to ensure that anytime a dependency changes, the
+ // validation logic evaluates
+ var h_obsValidationTrigger = ko.computed(ko.utils.extend({
+ read: function () {
+ var obs = observable(),
+ ruleContexts = observable.rules();
+
+ ko.validation.validateObservable(observable);
+
+ return true;
+ }
+ }, validationOptions));
+
+ ko.utils.extend(h_obsValidationTrigger, validationOptions);
+
  observable._disposeValidation = function () {
  //first dispose of the subscriptions
  observable.isValid.dispose();
@@ -96,11 +110,8 @@ ko.extenders['validatable'] = function (observable, enable) {
  delete observable['__valid__'];
  delete observable['isModified'];
  };
- } else if (enable === false && ko.validation.utils.isValidatable(observable)) {
-
- if (observable._disposeValidation) {
- observable._disposeValidation();
- }
+ } else if (options.enable === false && observable._disposeValidation) {
+ observable._disposeValidation();
  }
  return observable;
 };
@@ -110,8 +121,7 @@ function validateSync(observable, rule, ctx) {
  if (!rule.validator(observable(), ctx.params === undefined ? true : ctx.params)) { // default param is true, eg. required = true
 
  //not valid, so format the error message and stick it in the 'error' variable
- observable.error(ko.validation.formatMessage(ctx.message || rule.message, ctx.params));
- observable.__valid__(false);
+ observable.setError(ko.validation.formatMessage(ctx.message || rule.message, ctx.params));
  return false;
  } else {
  return true;
@@ -187,7 +197,6 @@ ko.validation.validateObservable = function (observable) {
  }
  }
  //finally if we got this far, make the observable valid again!
- observable.error(null);
- observable.__valid__(true);
+ observable.clearError();
  return true;
-};
+};

Src/ko.extensions.js

@@ -35,10 +35,11 @@ ko.validatedObservable = function (initialValue) {
  if (!ko.validation.utils.isObject(initialValue)) { return ko.observable(initialValue).extend({ validatable: true }); }
 
  var obsv = ko.observable(initialValue);
+ obsv.isValid = ko.observable();
  obsv.errors = ko.validation.group(initialValue);
- obsv.isValid = ko.computed(function () {
- return obsv.errors().length === 0;
+ obsv.errors.subscribe(function (errors) {
+ obsv.isValid(errors.length === 0);
  });
 
  return obsv;
-};
+};

Src/ko.validation.start.frag

@@ -23,3 +23,5 @@
  var kv = ko.validation;
  var koUtils = ko.utils;
  var unwrap = koUtils.unwrapObservable;
+ var forEach = koUtils.arrayForEach;
+ var extend = koUtils.extend;

Tests/validation-tests.js

@@ -1,9 +1,9 @@
-/*global 
- module:false, 
- equal:false, 
+/*global
+ module:false,
+ equal:false,
  notEqual:false,
  strictEqual:false,
- test:false, 
+ test:false,
  ok:false,
  asyncTest:false,
  start: false,
@@ -59,7 +59,7 @@ test('Issue #90 - "required: false" doesnt force validation', function () {
  .extend({ required: false });
 
  equal(testObj.isValid(), true, 'testObj is valid without value');
- 
+
  testObj('blah');
  equal(testObj.isValid(), true, 'testObj is valid with value');
 
@@ -372,7 +372,7 @@ test('Pattern validation mismatches numbers', function () {
 test('Pattern validation doesn\'t break with non-string values', function () {
  var testObj = ko.observable('')
  .extend({ pattern: '^$' });
- 
+
  testObj(12345);
  testObj.isValid();
 
@@ -610,7 +610,7 @@ test('Object is Valid when empty string is present - Preserves Optional Properti
 });
 
 test('Object is Valid and isValid returns True', function () {
- var testObj = ko.observable('').extend({ dateISO: true }); 
+ var testObj = ko.observable('').extend({ dateISO: true });
 
  testObj('2011-11-18');
 
@@ -878,7 +878,7 @@ test( 'Issue #81 - Dynamic messages', function () {
 
  var CustomRule = function () {
  var self = this;
- 
+
  this.message = 'before';
  this.params = 0;
 
@@ -928,9 +928,9 @@ test('Object is Valid and isValid returns True', function () {
 });
 
 test('Object is Valid and isValid returns True', function () {
- var testObj = ko.observable().extend({ 
+ var testObj = ko.observable().extend({
  required: true,
- minLength: 2, 
+ minLength: 2,
  pattern: {
  message: 'It must contain some',
  params: 'some'
@@ -1212,7 +1212,7 @@ test('Issue #31 - Recursively Show All Messages', function () {
  ok(!vm.one.isModified(), "Level 1 is not modified");
  ok(!vm.two.one.isModified(), "Level 2 is not modified");
  ok(!vm.three.two.one.isModified(), "Level 3 is not modified");
- 
+
  // now show all the messages
  errors.showAllMessages();
 
@@ -1548,3 +1548,51 @@ asyncTest('Async Rule Is NOT Valid Test', function () {
  testObj.extend({ mustEqualAsync: 5 });
 });
 //#endregion
+
+//# validation process tests
+module("Validation process", {
+ setup: function () {
+ var isStarted = false;
+ ko.validation._validateObservable = ko.validation.validateObservable;
+ ko.validation.validateObservable = function () {
+ ok(true, "Triggered only once");
+ if (!isStarted) {
+ isStarted = true;
+ start();
+ }
+
+ return ko.validation._validateObservable.apply(this, arguments);
+ };
+ },
+
+ teardown: function () {
+ ko.validation.validateObservable = ko.validation._validateObservable;
+ }
+});
+
+asyncTest("can be throttled using global configuration", function () {
+ expect(2); // one for initialization and when value changed
+
+ ko.validation.init({ validate: {
+ throttle: 10
+ }}, true);
+
+ var observable = ko.observable().extend({ validatable: true });
+ observable("1");
+ observable.extend({ minLength: 2 });
+
+ ko.validation.init({ validate: {} }, true);
+});
+
+asyncTest("can be throttled using using local configuration", function () {
+ expect(2); // one for initialization and when value changed
+
+ var observable = ko.observable().extend({ validatable: {
+ throttle: 10
+ } });
+
+ observable.extend({ minLength: 2 });
+ observable("1");
+});
+
+//#endregion

gruntfile.js

@@ -19,6 +19,8 @@ module.exports = function (grunt) {
  process: function (src, filepath) {
  return src
  .replace(/ko\.validation\./g, 'kv.')
+ .replace(/ko\.utils\.arrayForEach/g, 'forEach')
+ .replace(/ko\.utils\.extend/g, 'extend')
  .replace(/ko\.utils\.unwrapObservable/g, 'unwrap')
  .replace(/ko\.utils\./g, 'koUtils.');
  }
@@ -76,4 +78,6 @@ module.exports = function (grunt) {
  // Default task.
  grunt.registerTask("default", ["test", "uglify"]);
  grunt.registerTask("test", ["concat", "qunit", "jshint"]);
+
+ grunt.registerTask("compile", ["concat", "qunit", "uglify"]);
 };