Question

当我单击“提交”按钮时，我将尝试验证此输入字段。发生了什么事，当我单击“提交”按钮，并且文本框为空时，它提醒您，但是它应该警告请检查您的提交

HTML

<div id="newTest">
    <fieldset>
        <div class="row">
            <label>Last name:</label>
            <input type="text" data-bind="value: lastName" />
        </div>

    </fieldset>

    <fieldset>
        <button type="button" data-bind='click: submit'>Submit</button>

    </fieldset>
</div>

JavaScript

<script src="~/Scripts/knockout-3.5.0.js"></script>
<script src="~/Scripts/knockout.validation.min.js"></script>
<script>

    var viewModel = function () {

        ko.validation.rules.pattern.message = 'Invalid.';

        ko.validation.init({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: true,
            parseInputAttributes: true,
            messageTemplate: null
        }, true);

        var self = this;
        self.lastName = ko.observable().extend({ required: true }),

            self.submit = function () {
                if (viewModel.errors().length === 0) {
                    alert('Thank you.');
                }
                else {
                    alert('Please check your submission.');
                    viewModel.errors.showAllMessages();
                }
            };

    };

    viewModel.errors = ko.validation.group(viewModel);
    var viewModel2 = new viewModel();

    ko.applyBindings(viewModel2, document.getElementById("newTest"));

</script>

Answer 1

由于您将viewModel2初始化为new viewModel()，因此这两行代码：

viewModel.errors = ko.validation.group(viewModel);
var viewModel2 = new viewModel();

应为：

var viewModel2 = new viewModel();
viewModel.errors = ko.validation.group(viewModel2);

我也不清楚为什么要这样写。可能更简单的IMO。这是一个示例（JSFiddle：https://jsfiddle.net/vwuazfg0/）：

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.init({
  registerExtenders: true,
  messagesOnModified: true,
  insertMessages: true,
  parseInputAttributes: true,
  messageTemplate: null
}, true);

var viewModel = {
    lastName : ko.observable().extend({ required: true }),
  submit : function () {
    if (viewModel.errors().length === 0) {
      alert('Thank you.');
    }
    else {
      alert('Please check your submission.');
      viewModel.errors.showAllMessages();
    }
  }
};

viewModel.errors = ko.validation.group(viewModel);

ko.applyBindings(viewModel, document.getElementById("newTest"));

在提交时验证输入字段

1 个答案: