asp.net mvc - knockout validation - advanced search user interface -

asp.net mvc - knockout validation - advanced search user interface -

i building advanced search ui similar tfs query builder web interface. using knockout client side implementation , have more or less working except final validation create required items selected. sort-of works far giving me validation error if select item , de-select item. fine, have form validate when hitting search button.

i pretty sure need create utilize of ko.validatedobservable method, i'm not sure how. anyway, have fiddle at: http://jsfiddle.net/sstolp/uxbsa/ if has time or inclination help me out. appreciate it.

thank time.

scvm.searchline = function () { var self = this; self.selectedfield = ko.observable().extend({ required: true }); self.selectedoperator = ko.observable().extend({ required: true }); self.firstdate = ko.observable(new date()); self.lastdate = ko.observable(new date()); self.thedate = ko.observable(new date()); homecoming self;}; scvm.criteria = function () { var self = this, lines = ko.observablearray([]), // set 1 line in default loadinitialdata = function () { lines.push(new scvm.searchline()); }, rowcount = ko.computed(function () { homecoming lines().length; }), // operations addline = function () { lines.push(new scvm.searchline()); }, removeline = function (line) { lines.remove(line); }, search = function () { var info = $.map(lines(), function (line) { homecoming line.selectedfield() ? { selectedfield: line.selectedfield().searchfield, selectedoperator: line.selectedoperator().name, } : undefined }); alert("send server: " + json.stringify(data)); }, clear = function () { lines.removeall(); }; homecoming { lines: lines, loadinitialdata: loadinitialdata, rowcount: rowcount, addline: addline, removeline: removeline, search: search, clear: clear }; }();

yes, searchline objects must wrapped ko.validatedobservable. should implement computed property check isvalid() each criteria line , homecoming global validity flag.

scvm.searchline = function () { var self = this; self.selectedfield = ko.observable().extend({ required: true }); self.selectedoperator = ko.observable().extend({ required: true }); self.firstdate = ko.observable(new date()); self.lastdate = ko.observable(new date()); self.thedate = ko.observable(new date()); homecoming ko.validatedobservable(self); }; scvm.criteria = function () { // ... homecoming { lines: lines, loadinitialdata: loadinitialdata, rowcount: rowcount, addline: addline, removeline: removeline, search: search, clear: clear, // new property indicates validity of lines linesvalid: ko.computed(function(){ var items = lines(); (var = 0, l = items.length; < l; i++) if (!items[i].isvalid()) homecoming false; homecoming true; }) }; }();

this new property can used in enable binding of "search" button:

<input type="button" data-bind="enable: linesvalid, click: search" title="clicking button run search." value="search" />

i've modified fiddle. take look: http://jsfiddle.net/ostgals/uxbsa/8/

update:

also should modify criteria.search method, since our line array contains observables rather objects:

//... search = function () { var info = $.map(lines(), function (line) { line = ko.utils.unwrapobservable(line); homecoming line.selectedfield() ? { selectedfield: line.selectedfield().searchfield, selectedoperator: line.selectedoperator().name, } : undefined }); alert("send server: " + json.stringify(data)); }, //...

asp.net-mvc knockout.js knockout-validation