Knockout validate for empty field not working on button click

Question

I have a simple form which has email & Checkbox which is being validated by knockout, using below code form only validate checkbox but the the email fields if its left empty. Using Extend method it validates email only when we click inside email field.. Let us say when page load & i hide the save button then knocout only validates checkbox & give message "Please accept T&C" & when i cehck this box i can save data with entering email..

How can i validate email fields on button click also

SubscribeVm = {
    IAgree: ko.observable(false),
   // Email: ko.observable(),
     Email: ko.observable().extend({ required: true, email: true }),

    //Email: ko.observable().extend({
    //    // custom message
    //    required: {
    //        message: 'Please supply your email address.'
    //    }
    //}),
    Message: ko.observable(''),
    ShowForm: ko.observable(true),
    postSubscribe: function () {
        if (!SubscribeVm.IAgree()) {
            SubscribeVm.Message("Please accept T&C");
            return;
        }
        if (SubscribeVm.Email == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }
        $.ajax({
            url: baseURL + 'ajax/PostSubscription',
            type: 'POST',
            data: { "Email": SubscribeVm.Email, "IAgree": SubscribeVm.IAgree },
            dataType: 'json',
            success: function (data) {
                if (data.Message == "0") {
                    SubscribeVm.Message("Email value Missing");
                } else if (data.Message == "1") {
                    SubscribeVm.Message("Successfully subscribed");
                } else if (data.Message == "-1") {
                    SubscribeVm.Message("Email Already subscribed");
                   // SubscribeVm.Message
                }
                SubscribeVm.ShowForm(false);

            }
        });
    }
};

HTML

Subscribe to NewsLetter

                <div class="text-left ">
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left">
                            <input data-bind="value: $root.Email" type="email" class="form-control" name="Email" placeholder="Your email here" required />
                        </div>
                    </div>
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left">
                            <input data-bind="checked: $root.IAgree" type="checkbox" name="IAgree" value="false" />
                        </div>
                        <div class="media-body"><a href="#" class="text-white">Yes, I agree to receive Newsletter </a></div>
                    </div>
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left"><button data-bind="click: $root.postSubscribe" type="button" class="btn btn-info" style="font-weight:100" id="submitsubscribe">SUBSCRIBE</button></div>
                    </div>
                    <div class="media-body text-white" data-bind="text: Message">


                    </div>
                </div>

            </form>
        </div>

To me for some reason following code is not working

if (SubscribeVm.Email == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }

Have you looked at this: https://boyan.io/manually-trigger-knockout-validation/comment-page-1/ — Akrion, Oct 10 '18 at 04:49
Let me check.. i looked at couple of blogs but it doesnt seem to work? — Learning, Oct 10 '18 at 04:58

score 0 · Answer 1 · answered Oct 10 '18 at 09:20

First thing to note is that email is an observable so you should do this:

if (SubscribeVm.Email() == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }

Second thing to note is that you are not using the validation library correctly, since the above check should be done throught knockout-validation. Lookup for validatedObservable and its isValid.

What you are looking for would be like this:

if (!SubscribeVm.Email.isValid()) {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }

Neither of it works based on my code.. I am total new to knockout & tying to make thing work.. — Learning, Oct 10 '18 at 12:48

score 0 · Answer 2 · answered Oct 10 '18 at 19:04

Put something like this after you check the state of the checkbox and before the $.ajax call.

var v = ko.validatedObservable(SubscribeVm.Email());
var valid = v.isValid();
if (!valid) {
    // v.errors.showAllMessages(); // Default error message
    SubscribeVm.Message("Please provide a valid Email.");
    return;
}

This way you will be using the knockout validation framework.

You will need to change this line:

data: { "Email": SubscribeVm.Email, "IAgree": SubscribeVm.IAgree },

to

data: { "Email": SubscribeVm.Email(), "IAgree": SubscribeVm.IAgree() },

so you get the underlying values and not the knockout functions themselves.

Hope this works for you.

Knockout validate for empty field not working on button click

2 Answers2