Question

我对Knockout很新，甚至更新使用Knockout验证。我有一些简单的必需输入，应该阻止提交表单。它仍然提交空输入。我不确定我做错了什么。

我创造了一个小提琴here。要进行测试，请在光标位于最后一个零售输入时点击标签。这将添加一个新的空白行。然后点击提交并查看控制台。这是我的javascript代码：

var viewModel;

ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.init({
  registerExtenders: true,
  messagesOnModified: true,
  insertMessages: true,
  parseInputAttributes: true,
  messageTemplate: null
}, true);

var itemModel = function () {
  var self = this;
  self.itemNo = ko.observable().extend( {required: true} );
  self.brocCode = ko.observable().extend( {required: true} );
  self.itemDesc = ko.observable().extend( {required: true} );
  self.retail = ko.observable().extend( {required: true} );
}

var itemsModel = function(items) {
    var self = this;
  //self.items = ko.observableArray(items);

  self.items = ko.mapping.fromJSON(items);

  self.checkItemNo = function(data) {
    console.log("blurred!");
    var itemNo = "abc";
    if (itemNo != "") {
      var item = "";
        /*
        $.each(fullItemList, function(i, v) {
        if (v.No.search(itemNo) != -1) {
        item = v.Description;
        return;
        }
        });
        if(item != "") {
        console.log("found: " + item);
        var match = ko.utils.arrayFirst(self.items, function(item) {
        return itemNo === item.itemNo;
        });
        */
      var match = false;
      item = "Mudguard front";
      if (!match) {
        console.log("not a match!");
        console.log(data);
        data.itemDesc(item);
      }
    }
  }

  self.addLine = function() {
    self.items.push( new itemModel() )
  };

  self.removeItem = function(item) {
    self.items.remove(item);
  };

  self.errors = ko.validation.group(self.items);
};

ko.bindingHandlers.enterPress = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var allBindings = allBindingsAccessor();
    element.addEventListener('keydown', function (event) {
      var keyCode = (event.which ? event.which : event.keyCode);
      if (keyCode === 13 || (!event.shiftKey && keyCode === 9)) {
        event.preventDefault();
        console.log("hit enter/tab!");
        bindingContext.$root.addLine();
        return false;
      }
      return true;
    });
  }
};

function GetItems() {
            //var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems));
            var itemsJSON =  '[{"brochureId":1,"itemNo":"1000","brocCode":"1000","itemDesc":"Bicycle","retail":13.5},{"brochureId":1,"itemNo":"1100","brocCode":"1100","itemDesc":"Front Wheel","retail":35},{"brochureId":1,"itemNo":"1120","brocCode":"1120","itemDesc":"Spokes","retail":12.5},{"brochureId":1,"itemNo":"1150","brocCode":"1150","itemDesc":"Front Hub","retail":5},{"brochureId":1,"itemNo":"1151","brocCode":"1151","itemDesc":"Axle Front Wheel","retail":14},{"brochureId":1,"itemNo":"120","brocCode":"120","itemDesc":"Loudspeaker, Black, 120W","retail":12.5},{"brochureId":1,"itemNo":"125","brocCode":"125","itemDesc":"Socket Back","retail":10}]';
            viewModel = new itemsModel(itemsJSON);
            ko.applyBindings(viewModel);
        }

$(document).ready(function () {
    GetItems();

  $('#brochureForm :submit').on('click', function(e) {
    e.preventDefault();  //prevent form from submitting

    if (viewModel.errors().length === 0)
      //if(viewModel.validationModel.isValid())
    {
      console.log("submitting!");
      //$("#brochureForm").submit();
    }
    else
    {
      console.log("not valid!");
    }
  });
});

Answer 1

我已更新你的小提琴https://jsfiddle.net/q7ahfzut/2/。您的问题只是由于分组时的配置。您需要添加{ deep: true }，这将导致验证在所有经过验证的observable上运行。您可以添加live: true，这会在向阵列添加新项目时运行验证。其他一些注意事项：

不需要任何jquery - 您可以使用knockout进行点击事件并提交
我使用映射库为get go中的所有项添加验证。

希望能帮到你解决问题！

<强>更新

查看ko验证文档here以获取有关配置

更新2

要在评论中回答您的问题：请查看适用于淘汰赛的mapping插件，了解其工作原理（与验证相比，它的记录要好一些。您可以create拦截映射以便操作生成的ViewModel。options.data包含在映射到observable之前映射的数据。了解它的最佳方法是读取文档然后通过慢慢地逐步浏览它

淘汰验证不适用于必需的项目

1 个答案: