CODEWITHSUNDEEP
javascriptvalidationknockout.jsumbraco
Chozen
Chozen

Reputation: 299

KnockoutJS make input fields required in Umbraco

I'm sure this question has been answered in various ways, but I'm looking for something a little more specific to my scenario.

I'm a beginner in JavaScript, and I've only been dealing with knouckoutjs for a couple weeks. I'm the front-end developer for an Umbraco based project, and I'm working in knockout code someone else wrote.

I have 2 input fields that are not in a form, they both need to be required but only one is working at the moment.

The 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>

The "card-name" input validates just fine but I'm unable to do the same with the "card-number" field, which needs to not submit with an empty field.

KnockoutJS Validation

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

Upvotes: 0

Views: 321

Answers (1)

sifriday
sifriday

Reputation: 4462

I think you just need to extend what you have with a new message and a new check:

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

Upvotes: 1

Related Questions