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

因此您将获得基础值，而不是敲除功能本身。

希望这对您有用。

淘汰赛验证空白区域不能在按钮单击上起作用

2 个答案: