apply validation on ko.computed using knockout.js

2019-08-26 02:07发布

问题:

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>