淘汰验证在用户输入任何数据之前自动显示错误消息答案

【问题标题】：Knockout Validation automatically displaying error message before user has entered any data淘汰验证在用户输入任何数据之前自动显示错误消息
【发布时间】：2013-11-29 04:03:43
【问题描述】：

我正在尝试实施淘汰赛验证和淘汰赛映射。我有一个 ASP.Net MVC WebAPI，它将 JSON 数据发送到我的客户端，我将 JSON 映射到模型中的可观察对象：

视图模型：

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

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null,
    decorateElement: true,
    errorClass: 'error'
});
var MakePaymentViewModel = function ()
{
    var mapDataFromJson = function (jsonFromServer)
    {
        var model = ko.mapping.fromJS(jsonFromServer);
        self.PaymentAmount(model.PaymentAmount());
        self.MakePaymentTo(model.MakePaymentTo());
        self.MakePaymentOn(model.MakePaymentOn());
    };

    var self = this;

    /* MAKE PAYMENT MODEL*/
    self.PaymentAmount = ko.observable().extend({ required: { message: 'required'}});
    self.MakePaymentTo = ko.observable().extend({ required: { message: 'required'}});   
    self.MakePaymentOn = ko.observable().extend({ required: { message: 'required' }});  
    self.Errors = ko.validation.group(self);

    self.MapDataFromServer = function (jsonFromServer)
    {
        mapDataFromJson(jsonFromServer);
    };

    self.DoPaymentConfirmation = function ()
    {
        console.log('error count: ' + self.Errors().length);
    };
};

这是我的看法：

<form id="MakePaymentForm" autocomplete="off">
<div class="input-wrapper">
    <label for="SendingAmount" class="text-left">I am sending <small>*</small></label>
    <input id="PaymentAmount" type="text" data-bind="value: PaymentAmount"/>
</div>

<div class="input-wrapper">
    <label for="MakePaymentTo" class="text-left">to <small>*</small></label>
    <input id="MakePaymentTo" type="text" data-bind="value: MakePaymentTo"/>
</div>

<div class="input-wrapper">
    <label for="MakePaymentOn" class="text-left">on <small>*</small></label>
    <input name="MakePaymentOn" id="MakePaymentOn" type="text" data-bind="value: MakePaymentOn"/>
</div>
<button type="submit" class="small radius" data-bind="click: DoPaymentConfirmation">Send</button>
</form>

我认为发生的事情是我第一次从服务器获取数据时，JSON 的数据为空：

{"PaymentAmount":null,"MakePaymentTo":null,"MakePaymentOn":null}

因此，mapDataFromJson 函数使用空数据填充 observables 并触发验证规则，因此 UI 会在用户输入任何数据之前立即显示错误消息。

关于如何解决这个问题的任何想法？我是 Knockout 的新手，所以我可能没有正确执行此操作。感谢您的宝贵时间。

【问题讨论】：

您能否将可观察对象的设置包装在 mapDataFromJson 内的空引用检查中？
我试过了，验证没有立即显示，但是，当我按下提交按钮时，我可以通过 console.log('error count: ' + self.Errors().length) 来查看有错误，但现在 UI 中没有显示任何错误消息。必须是相反的一天。
我想通了。对面是上周二。我忘了使用 self.Errors.showAllMessages();它按预期工作。感谢您的帮助。
@TomSchreck 你能把它放在答案中并将其标记为已回答，以便其他人可以看到它已解决

标签： knockout.js knockout-2.0 knockout-mapping-plugin knockout-validation

【解决方案1】：

感谢 Jamie 为我指明了正确的方向。这是我为解决问题所做的：

    var mapDataFromJson = function (jsonFromServer)
{
    var model = ko.mapping.fromJS(jsonFromServer);

    if (model.PaymentAmount() != null)
    {
        self.PaymentAmount(model.PaymentAmount());  
    }

    if (model.MakePaymentTo() != null)
    {
        self.MakePaymentTo(model.MakePaymentTo());  
    }

    if (model.MakePaymentOn() != null)
    {
        self.MakePaymentOn(model.MakePaymentOn());  
    }
};

然后在绑定到提交按钮的函数中我这样做：

    self.DoPaymentConfirmation = function ()
{
    if (self.Errors().length == 0)
    {           
        //POST TO SERVER
    }
    else
    {
        self.Errors.showAllMessages();
    }
};

【讨论】：