Javascript 验证消息未出现_Javascript_Knockout.js_Knockout Validation

Javascript 验证消息未出现

javascript knockout.js

Javascript 验证消息未出现,javascript,knockout.js,knockout-validation,Javascript,Knockout.js,Knockout Validation,将ko validation extender添加到动态对象时，调用showAllMessages（）时不会显示错误消息。在各个控件下方也没有添加显示错误消息的span标记我还希望在对象添加到可观察数组时，立即在控件下方显示错误消息请找到小提琴 JavaScript var schedule = function() { var self = this; self.name = ko.observable(); self.startDate = ko.observable();

将ko validation extender添加到动态对象时，调用showAllMessages（）时不会显示错误消息。在各个控件下方也没有添加显示错误消息的span标记

我还希望在对象添加到可观察数组时，立即在控件下方显示错误消息

请找到小提琴

JavaScript

var schedule = function() {


var self = this;
  self.name = ko.observable();
  self.startDate = ko.observable();
  self.endDate = ko.observable();

  // Add validation
  self.name.extend({required: {message: 'Name Required'}});
  self.startDate.extend({required: {message: 'Start Date Required'}});
  self.endDate.extend({required: {message: 'End Date Required'}});
}

var viewmodel = {
  model: {
    lookups: {
      grandSlams: ["Australian Open", "French Open", "Wimbledon", "US Open"]
    },
    schedules: ko.observableArray(),
    status: ko.observable()
  },
  actions: {
    addSchedule: function() {
      console.log('Add Called');
      viewmodel.model.schedules.push(new schedule());
      viewmodel.model.status('Edited');
      console.log(viewmodel.model.schedules().length);
    },
    saveSchedule: function(){
      console.log('Save Called');
      var errors = ko.validation.group(viewmodel.model.schedules, { deep: true });
      if (errors().length > 0) {
          console.log(errors());
          errors.showAllMessages();
          hasError = true;
      }
      viewmodel.model.status('Saved!!!');
    }
  }
};

$(function() {
  ko.validation.init({
            insertMessages: true,
            messagesOnModified: true,
            grouping: {
                deep: true,        //by default grouping is shallow
                observable: true    //and using observables
            }
        });
  ko.applyBindings(viewmodel);
});

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="knockout@2.2.1" data-semver="2.2.1" src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
    <script data-require="knockout-validation@*" data-semver="1.0.2" src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Knockout Validation!</h1>
    <button data-bind="click: actions.addSchedule">Add Schedule</button>
    <button data-bind="click: actions.saveSchedule">Save Schedule</button>
    <h3>Schedules</h3>
    <table>
      <thead>
        <tr>
          <th>Grand Slams</th>
          <th>Start</th>
          <th>End</th>
        </tr>
      </thead>
      <tbody data-bind="foreach:model.schedules">
        <tr>
          <td style="width:250px">
            <select data-bind="options: $root.model.lookups.grandSlams, optionsCaption:'Select...'"></select>
          </td>
          <td style="width:250px">
            <input type="text" data-bind="value: startDate" />
          </td>
          <td style="width:250px">
            <input type="text" data-bind="value: endDate" />
          </td>
        </tr>
      </tbody>
    </table>
    <h3 data-bind="text: model.status"></h3>
  </body>

</html>


淘汰验证！
添加时间表
保存时间表
时间表
大满贯
开始
终点

您缺少select元素上的值绑定。应该是

<select data-bind="value: name, options: $root.model.lookups.grandSlams, optionsCaption:'Select...'"></select>

var viewmodel = {
  model: {
    lookups: {
      grandSlams: ["Australian Open", "French Open", "Wimbledon", "US Open"]
    },
    schedules: ko.observableArray(),
    status: ko.observable()
  },
  actions: {
    addSchedule: function() {
      console.log('Add Called');
      viewmodel.model.schedules.push(new schedule());
      viewmodel.model.status('Edited');
      this.actions.showErrors();
      console.log(viewmodel.model.schedules().length);
    },
    showErrors: function() {
      var errors = ko.validation.group(viewmodel.model.schedules, { deep: true });
      if (errors().length > 0) {
          console.log(errors());
          errors.showAllMessages();
          hasError = true;
      }
    },
    saveSchedule: function(){
      console.log('Save Called');
      var errors = ko.validation.group(viewmodel.model.schedules, { deep: true });
      this.actions.showErrors();
      viewmodel.model.status('Saved!!!');
    }
  }
};