Knockout JS Validation to existing view model

Question

This is my current code unmodified: http://jsfiddle.net/XABtF/

I am currently using both jQuery Validation & Knockout Validation

I have read through the documentation on both and tried implementing them to my existing script, both haven't ran successfully. Here is how I attempted to implement the Knockout Validation: http://jsfiddle.net/yNVeF/

My script is very simple, I would like to just put validation on two observables like this:

self.emailAdd = ko.observable("");

I have tried doing it like this:

self.emailAdd = ko.observable("").extend({required: { message: 'Please supply your email address.' }});

What's the problem? Is it not working? Looks fine to me... assuming you actually included the validation plugin. — Jeff Mercado, Mar 26 '13 at 18:39
I think my issue is binding the validation to the save button, I've got a several step ajax form, and I'm not grasping the syntax of including this script into the submission. — Stephen, Mar 26 '13 at 18:48

score 1 · Accepted Answer · answered Mar 27 '13 at 17:15

1

Placed the jQuery validate below my applyBindings and binded the view model name with 'save':

$("#getAcc").validate({ submitHandler: authViewModel.save });

answered Mar 27 '13 at 17:15

Stephen

707
3
13
33

Andiih · Answer 2 · 2013-03-27T10:30:28.057

Edit: As per comments below, if you use the validation plugin, the extenders are a part of that - if not... /Edit

The extenders are not pre-written - you need to add your own required extender as demonstrated in the documentation here.

http://knockoutjs.com/documentation/extenders.html

ko.extenders.required = function(target, overrideMessage) {
  //add some sub-observables to our observable
  target.hasError = ko.observable();
  target.validationMessage = ko.observable();

  //define a function to do validation
  function validate(newValue) {
     target.hasError(newValue ? false : true);
     target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
  }

  //initial validation
  validate(target());

  //validate whenever the value changes
  target.subscribe(validate);

  //return the original observable
  return target;
};

Knockout JS Validation to existing view model

2 Answers2