Knockout Validation автоматически отображает сообщение об ошибке до того, как пользователь введет какие-либо данные

Я пытаюсь реализовать Knockout Validation и Knockout Mapping. У меня есть 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 заполняет наблюдаемые данные нулевыми данными и запускает правила проверки, и, следовательно, пользовательский интерфейс отображает сообщения об ошибках непосредственно перед тем, как пользователь сможет ввести какие-либо данные.

Есть какие нибудь идеи как это починить? Я новичок в Knockout, поэтому, возможно, я делаю это неправильно. Спасибо за ваше время.


knockout.js knockout-validation knockout-mapping-plugin knockout-2.0
person Tom Schreck    schedule 15.11.2013    source источник
comment
Не могли бы вы обернуть настройку наблюдаемых в проверку нулевой ссылки внутри mapDataFromJson ?   -  person Jamie Dixon    schedule 15.11.2013
comment
Я попробовал это, и проверка не отображается сразу, однако, когда я нажимаю кнопку отправки, я могу использовать console.log('количество ошибок: ' + self.Errors().length), чтобы увидеть, что есть ошибки, но теперь ни один из сообщения об ошибках отображаются в пользовательском интерфейсе. Это должно быть против дня.   -  person Tom Schreck    schedule 15.11.2013
comment
Я понял. Противоположный день был в прошлый вторник. Я забыл использовать self.Errors.showAllMessages(); Он работает как положено. Спасибо за вашу помощь.   -  person Tom Schreck    schedule 15.11.2013
comment
@TomShreck, можете ли вы поместить это в ответ и пометить его как отвеченный, чтобы другие люди могли видеть, что он решен   -  person Jared    schedule 15.11.2013

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо Джейми за то, что указал мне правильное направление. Вот что я сделал для решения проблемы:

    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();
    }
};
person Tom Schreck    schedule 15.11.2013