敲除验证空字段在按钮单击时不起作用

Question

我有一个简单的表单，其中包含正在通过敲除验证的电子邮件和复选框，使用下面的代码表单仅验证复选框，但如果电子邮件字段为空，则电子邮件字段为空。使用扩展方法，它仅在我们单击电子邮件字段内部时验证电子邮件。让我们说当页面加载时，我隐藏保存按钮，然后 knocout 只验证复选框并给出消息“请接受 T&C”，当我打开这个框时，我可以保存数据输入电子邮件..

如何在按钮单击时验证电子邮件字段

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

订阅时事通讯

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

对我来说，由于某种原因，以下代码无法正常工作

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

Answer 1

首先要注意的是电子邮件是可观察的，因此您应该这样做：

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

要注意的第二件事是您没有正确使用验证库，因为上述检查应该通过敲除验证来完成。查找validatedObservable 及其isValid。

你要找的是这样的：

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

Answer 2

在检查复选框的状态之后和 $.ajax 调用之前放置这样的内容。

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

这样您将使用淘汰赛验证框架。

您需要更改此行：

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

到

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

所以你得到的是基础值，而不是剔除函数本身。

希望这对你有用。