javascript - KnockoutJS 使 Umbraco 中的输入字段成为必需

Question

我确信这个问题已经以各种方式得到了回答，但我正在寻找更适合我的场景的东西。

我是 JavaScript 初学者，我接触 knouckoutjs 才几个星期。我是一个基于 Umbraco 的项目的前端开发人员，我正在处理其他人编写的 knockout 代码。

我有 2 个不在表单中的输入字段，它们都需要为必填字段，但目前只有一个有效。

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>

“卡名”输入验证得很好，但我无法对“卡号”字段执行相同的操作，该字段不需要使用空字段提交。

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 });
        }
    });
},

Answer 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...