Reset errors in Knockout validation in step-by-step wizard

1
votes

I have created a step by step wizard using knockout and the template bind and now I want to force the user to complete each page before going to next, and by completing I mean Knockout validate must be valid. The next-button is enabled when there is no error on the viewmodel and it works fine when stepping through the wizard but the problem occurs when you go into one step and press previous. The errors kept "alive" even when you go back, so the next-button on page 1 are disabled because page 2 are invalid.

I've setup a fiddle: http://jsfiddle.net/1uo8rtw2/1/

  1. Write something in the name box
  2. Press next
  3. Press previous
  4. Now you see the Next-button is disabled.

Is suppose the problem is in the code below:

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

    self.PrevIsEnabled = ko.observable(false);
    self.NextIsEnabled = ko.computed(function() {
        return self.errors().length == 0 && self.SelectedTemplate() != "Age";
    });

Is there any way one can reset error-count when going back and force knockout validation to re-validate the current template?

2
javascriptvalidationknockout.js

2 Answers

0
votes

self.errors contains the errors for all fields.

You should check only current template field validity:

self.NextIsEnabled = ko.computed(function() {
    var selectedTemplate = self.SelectedTemplate();
    return selectedTemplate != "Age" 
           && self.viewModel[selectedTemplate].isValid();
}

Of course, if you have more than one field in a template, you should check for the validity of all of them.

0
votes

I've stumbled upon this pull request at github, so all I have to do is subscribe to SelectedTemplate and call 

self.errors.clearAllErrors();

and it works.

I cannot get my updated JSFiddle to work because i cannot implement the new function but here is the ground though of it all http://jsfiddle.net/1uo8rtw2/2/