0

I'm working on a Durandal JS SPA application, and I wish to use Knockout Validation.

The problem is that validation is being triggered on page load, which is not what I want - I'd like to trigger the validation myself.

I have tried using 

 ko.validation.init({
     registerExtenders: true,
     messagesOnModified: true,
     insertMessages: false
 });

as well as ko.validation.configure with the same parameters, followed by ko.validation.init();

Here is a snippet of my viewmodel.

function ViewModel(){
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });
    self.errors = ko.validation.group(self);
}

I also tried delaying the call to ko.validation.group(self) till a button is clicked, but then it wont validate at all.

Jeff
  • 12,085
  • 12
  • 82
  • 152

1 Answers1

1

assuming you only want to show a summary of validation errors per some action, you could do something like this:

html

<input type="text" data-bind='value: username' />
<br/>
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />

js

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });
    self.showErrors = ko.observable(false);

    self.submit = function () {
        self.showErrors(true);
        if (self.isValid()) {
            // save data here   
        }
    }

    self.errors = ko.validation.group(self);
}

sample fiddle

http://jsfiddle.net/LvHUD/1/

Kevin Nacios
  • 2,843
  • 19
  • 31
  • While your fiddle is working fine, I can't seem to get it working in my own code, using DurandalJS. I would like to show the errors beside the input field itself. – Jeff Jun 29 '13 at 15:46
  • The insertMessages option set to true will automatically insert errors next to inputs. An alternative is to use the `validationMessage` binding to manually place errors. See http://jsfiddle.net/LvHUD/5/ – Kevin Nacios Jun 29 '13 at 19:44
  • Thanks, but I still can't get the validation to trigger when I explicitly say so, rather than instantly on pageload. It's hard to make a jsFiddle due to DurandalJS's AMD architecture. – Jeff Jun 29 '13 at 20:56
  • shot in the dark, are you running some initialization function for your viewmodel to populate it on pageload? see this example: http://jsfiddle.net/LvHUD/7/ once an observable is extended with a validation rule, it will immediately begin to apply the rules to the observable, and track any errors. if you then set the values of the observable somewhere else later on, then the rules will trigger, even though you may not want them to yet. – Kevin Nacios Jun 30 '13 at 00:01
  • No, thats the thing, I dont do that. In fact, the viewmodel is just a simple login page, so nothing gets set initially. – Jeff Jun 30 '13 at 00:06
  • could you add the html for your view? if you have insertMessages turned off, im wondering how you are displaying the error for the input field. – Kevin Nacios Jun 30 '13 at 00:22
  • I did not get to that part yet, the problem is still getting Validation to trigger when I say so, and not on pageload. :) - if it is too much trouble, don't worry. I wrote a KO binding for a validator component I made awhile ago. Not sure if I should share it on here though, don't want to get frowned upon for a shameless plug that is not related to the Knockout-Validation framework. – Jeff Jun 30 '13 at 11:46