KnockoutJS使Umbraco需要输入字段

时间:2014-08-08 15:59:40

标签: javascript validation knockout.js umbraco

我确定这个问题已经以各种方式得到了解答,但我正在寻找一些更具体的方案。

我是JavaScript的初学者,而且我只用了几个星期处理knouckoutjs。我是一个基于Umbraco的项目的前端开发人员,我在其他人写的淘汰代码中工作。

我有两个不在表单中的输入字段,它们都需要,但目前只有一个正在工作。

HTML

            <div class="add-card">
                <div class="card-button close"></div>
                <h3>Add Card</h3>
                <div class="input-wrap"><input class="card-name" type="text" data-bind="value: B5.Model.Loyalty.NewLoyaltyCardName" placeholder="Name" required /></div>
                <div class="input-wrap"><input class="card-number" type="text" data-bind="value: B5.Model.Loyalty.NewLoyaltyCardNumber" placeholder="Number" required /></div>

                <button class="tagUpdate button radius" data-bind="text: 'Add', click: function(data,event) {{ B5.Model.Loyalty.AddLoyaltyCard(data); }}"></button>                                 

                <div class="hidden" data-alert="data-alert" data-bind="attr: { class: B5.Model.Loyalty.AddLoyaltyCardsResult().css }, visible: B5.Model.Loyalty.CreateLoyaltyCard()">
                    <span data-bind="text: B5.Model.Loyalty.AddLoyaltyCardsResult().message"></span>
                </div>
                <div class="hidden" data-alert="data-alert" data-bind="attr: { class: B5.Model.Loyalty.RemoveLoyaltyCardResult().css }, visible: B5.Model.Loyalty.DeActivateLoyaltyCard()">
                    <span data-bind="text: B5.Model.Loyalty.RemoveLoyaltyCardResult().message"></span>
                </div>  
            </div>

&#34;卡名&#34;输入验证得很好,但我不能对&#34;卡号&#34;做同样的事情。字段,不需要提交空字段。

KnockoutJS验证

NewLoyaltyCardName: ko.observable(''),
NewLoyaltyCardNumber: ko.observable(''),
CreateLoyaltyCard: ko.observable(false),
AddLoyaltyCardsResult: ko.observable({ css: 'error', message: '' }),
TextAddLoyaltyCardSuccess: ko.observable('Your card has been successfully created.'),
TextAddLoyaltyCardNoName: ko.observable('You have not entered a card name.'),
AddLoyaltyCard: function (data, event) {
    if (B5.Model.Loyalty.NewLoyaltyCardName() == '') {
        B5.Model.Loyalty.CreateLoyaltyCard(true);
        B5.Model.Loyalty.AddLoyaltyCardsResult({ css: 'alert-box alert', message: B5.Model.Loyalty.TextAddLoyaltyCardNoName() });
        return; 
    }
    B5.Model.IsBusy.push('B5.Model.Loyalty.AddLoyaltyCard');
    B5.Loyalty.CreateLoyaltyCard(B5.Model.Loyalty.LoyaltyAccount(), B5.Model.Loyalty.LoyaltyAccount().AccountId(), B5.Model.Loyalty.NewLoyaltyCardName(), B5.Model.Loyalty.NewLoyaltyCardNumber(), function (context, data) {
        B5.Model.IsBusy.remove('B5.Model.Loyalty.AddLoyaltyCard');
        B5.Model.Loyalty.DeActivateLoyaltyCard(false);
        if (data.Result === 0) {
            B5.Model.Loyalty.NewLoyaltyCardName('');
            B5.Model.Loyalty.NewLoyaltyCardNumber('');

            // set a success alert
            B5.Model.Loyalty.CreateLoyaltyCard(true);
            B5.Model.Loyalty.AddLoyaltyCardsResult({ css: 'alert-box success', message: B5.Model.Loyalty.TextAddLoyaltyCardSuccess() });

            // clear the cached loyalty account summary and reload
            B5.Model.Cache.RemoveItem('B5.Loyalty.LoyaltyAccountsSummary');
            B5.Model.Loyalty.LoadLoyaltyAccountsSummary(true);
        }
        else {
            // set an error alert
            B5.Model.Loyalty.CreateLoyaltyCard(true);
            B5.Model.Loyalty.AddLoyaltyCardsResult({ css: 'alert-box alert', message: data.ErrorMessage });
        }
    });
},

1 个答案:

答案 0 :(得分:1)

我认为您只需要使用新消息和新支票扩展您所拥有的内容:

... existing code ...
TextAddLoyaltyCardNoName: ko.observable('You have not entered a card name.'),

// Add this next line
TextAddLoyaltyCardNoNumber: ko.observable('You have not entered a card number.'),

AddLoyaltyCard: function (data, event) {
    if (B5.Model.Loyalty.NewLoyaltyCardName() == '') {
        B5.Model.Loyalty.CreateLoyaltyCard(true);
        B5.Model.Loyalty.AddLoyaltyCardsResult({ css: 'alert-box alert', message: B5.Model.Loyalty.TextAddLoyaltyCardNoName() });
        return; 
    }
    // Add this next block
    if (B5.Model.Loyalty.NewLoyaltyCardNumber() == '') {
        B5.Model.Loyalty.CreateLoyaltyCard(true);
        B5.Model.Loyalty.AddLoyaltyCardsResult({ css: 'alert-box alert', message: B5.Model.Loyalty.TextAddLoyaltyCardNoNumber() });
        return; 
    }

    ...existing code...