i just created a scenario , the thing i wanted, can you check out this fiddle jsfiddle.net/5PRMe/393. i want to validate this, some piece of code i used here, but comment it.kindly check this. Bascially i am follow this link https://github.com/knockout/knockout/wiki/View-Add-Edit-Delete-Design-Pattern (full code of this link is at the bottom of the page), to create my code, but i want knockout validation, with proper messages, but i did't understand how to do validation if we have with binding with computedObservable, can anyone help me to sort out the problem?
var baseModel = function () {
this.id = ko.observable(0);
this.name = ko.observable("").extend({ required: true });
this.title = ko.observable(undefined).extend({
required: { message: "You must select title" },
});
this.email = ko.observable("").extend({ required: true });
this.phone = ko.observable("").extend({ required: true });
this.mobile = ko.observable('');
this.streetAddress = ko.observable('');
this.city = ko.observable('');
this.state = ko.observable('');
this.zipCode = ko.observable('');
this.fax = ko.observable('');
this.description = ko.observable('');
this.editSelectedItemErrors = ko.validation.group([this.name,this.accountId,this.title,this.gender,this.email,this.phone,this.country]);
}
var viewModel = function () {
var self = this;
self.editSelectedItem = ko.observableArray('');
var mappedItems = ko.mapping.fromJS(new baseModel());
self.editSelectedItem(mappedItems);
self.saveContact = function (form) {
if (baseModel.editSelectedItemErrors().length === 0) {
// save data
}
else{
baseModel.editSelectedItemErrors.showAllMessages();
}
}
self.SelectedRecord = ko.computed(function () {
var selected = self.editSelectedItem();
selected.selectedOption;
//selected.selectLanguage;
selected.streetAddress;
var result = (selected);
console.log(result.length);
if (result != null) {
result = ko.toJS(result);
var observable = ko.mapping.toJS(result);
//console.log(observable);
return observable;
} else {
return new baseModel();
};
}, self);
}
var contactModel = new viewModel();
$(function () {
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null,
decorateElement: true,
grouping: { deep: true, observable: true, live: true }
}, true);
ko.applyBindings(contactModel);
});
<div id="divContact" class="flt w100 space form" data-bind="with : SelectedRecord()">@*<!-- ko with : SelectedRecord -->*@
<div class="row">
<label>
First Name</label>
<span>
<input id="Name" name="Name" type="text" data-bind="value : name,uniqueName: true" class="field required" placeholder="Name" />
</span>
</div>
<div class="row">
Email</label>
<span>
<input id="Email" type="text" data-bind="value : email,uniqueName: true" class="required field" placeholder="Email" /></span>
</div>
<div class="row">
<label>
Phone</label>
<span>
<input id="Phone" type="text" data-bind="value : phone,uniqueName: true" class="field" placeholder="Phone" /></span>
<label>
Mobile</label>
<span>
<input id="Mobile" type="text" data-bind="value : mobile,uniqueName: true" class="field" placeholder="Mobile" /></span>
</div>
<div class="row">
<label>
Street Adress</label>
<span>
<input id="Street" type="text" data-bind="value : streetAddress,uniqueName: true" class="field" placeholder="Street" /></span>
<label>
City</label>
<span>
<input id="City" type="text" data-bind="value : city,uniqueName: true" class="field" placeholder="City" /></span>
</div>
<div class="row">
<label>
State</label>
<span>
<input id="State" type="text" data-bind="value : state,uniqueName: true" class="field" placeholder="State" /></span>
<label>
Zip Code</label>
<span>
<input id="Zip" type="text" data-bind="value : zipCode,uniqueName: true" class="field" placeholder="Zip Code" /></span>
</div>
<div class="row">
Fax</label>
<span>
<input id="Fax" type="text" data-bind="value : fax,uniqueName: true" class="field" placeholder="Fax" /></span>
</div>
<div class="row">
<label>
Description</label>
<span>
<textarea class="input-field " data-bind="value: description,uniqueName: true"></textarea></span>
</div>
<div class="row">
<input data-bind="click: function() { contactModel.saveContact($data,0);}" type="submit" value="Save" class="btn"/>
<input type="button" class="btn" value="Cancel" data-bind="click: function() { contactModel.cancelCreate($data,0);}">
</div>