Knockout.js 淘汰验证插件-仅在表单提交时显示错误消息

我正在使用敲除绑定和敲除验证插件 （）

我只想在表单提交中显示错误消息，而不想在输入模糊中显示错误消息，有什么想法吗

HTML

}

$(function () {

// attach view model to the DOM
var pageModel = new viewModel();
pageModel.errors = ko.validation.group([pageModel.email,pageModel.firstName]);

ko.applyBindings(pageModel);

}))

谢谢

试试这个：

var viewmodel = function () {
    var self = this;
    //...
    this.errors = ko.validation.group(this, { deep: true });

    this.submitViewModel = function () {
        if (self.errors().length > 0) {
            self.errors.showAllMessages(true);
            return;
        }
        //...
    }
}

---

我也有这个要求——客户不希望用户在实际提交表单之前看到“红色”。看看这个密码笔-

Html-

<div class="container no-padding">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div>
                <div>
                    <p>Phone: <a href="tel:0123456789">0123456789</a></p>
                    <p>Email: <a href="mailto:a@b.com" target="_top">email@example.co.uk</a></p>
                    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-sm-8 col-xs-12">
            <div>
                <div>
                    <form role="form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: firstName">
                                    <label class="control-label" for="contact-name">First Name</label>
                                    <input type="text" class="form-control" id="contact-name" placeholder="i.e Joe" data-bind="textInput: firstName"/>
                      <span class="help-block" data-bind="validationMessage: firstName"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: email">
                                    <label class="control-label" for="contact-email">Email</label>
                                    <input type="email" class="form-control" id="contact-email" placeholder="i.e email@info.com" data-bind="textInput: email"/>
                      <span class="help-block" data-bind="validationMessage: email"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: surname">
                                    <label class="control-label" for="contact-surname"> Surname</label>
                                    <input type="text" class="form-control" id="contact-surname" placeholder="i.e Bloggs" data-bind="textInput: surname"/>
                      <span class="help-block" data-bind="validationMessage: surname"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: category">
                                    <label class="control-label" for="contact-topic">Please select a category</label>
                                    <select class="form-control" id="contact-topic" data-bind="value: category">
                                        <option value="">Select category</option>
                                        <option value="general">General contact</option>
                                        <option value="issue">Report an issue</option>
                                        <option value="help">Help enquiry</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" data-bind="validationElement: message">
                                <label class="control-label" for="contact-textarea">Write your message here, the more detail the better</label>
                              <textarea style="width:100%" id="contact-textarea" placeholder="Place message here" rows="10" data-bind="textInput:message"></textarea>
                   <span class="help-block" data-bind="validationMessage: message"></span>
                            </div>
                            <button type="button" class="btn btn-green" data-bind="click: submit">Get in touch</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

---

有一种方法可以实现这一点，但是您需要使用init选项将insertMessages设置为false

ko.validation.init({
    insertMessages: false,
    messagesOnModified: true,
    parseInputAttributes: false
});

在加载validatedObservable或extend{required:true}etc逻辑之前，应该调用此代码。在加载任何viewModel代码之前，我在代码文件的顶部调用它

接下来，您应该向视图模型添加一个新的可观察对象，称为“submitted”

现在，在“提交”按钮中，单击以下操作：

var saveDraft = function () {
    submitted(true);
    var isValid = poll.isValid();
    if (!isValid) {
        console.log('not valid!');
        poll.errors.showAllMessages(true);
        return;
    }
}
model.saveDraft = saveDraft;

然后，您需要手动将验证消息放入标记中，如下所示：

    <div class="form-group">
        <div class="col-md-12">
            <label for="txtPollName" data-bind="">POLL NAME</label>
            <input type="text" class="form-control" id="txtPollName" placeholder="Enter a unique name for the poll." data-bind="value: poll().name">
            <div class="invalid-feedback" data-bind="visible: submitted(), validationMessage: poll().name">
            </div>
        </div>
    </div>

---

此代码段来自我的对象工厂，它为我创建对象并将它们自动包装到分组的ValidatedObservable中。deep:true选项意味着isValid（）将调用它的所有子验证对象isValid方法，并且它们都必须为true才能使对象有效。Deep false表示只检查validatedObservable的值是否有效，因为它总是有一个值，所以它总是有效的。Live:true意味着如果对正在验证的从属可观测对象进行任何更改，则验证逻辑将实时重新运行。

我想要一百万美元！说真的，在来这里之前，你需要表现出你已经尝试过了，你想说什么就说什么。这不是一个请为我编写代码的网站。我认为主要问题很明显，不需要代码解释-是否有一种方法可以在表单提交而不是模糊事件中使用敲除验证插件来调用验证？我理解这个问题，我相信答案很简单，这导致：你试过/搜索过吗？是的，我以前搜索过谷歌-没有结果，除了我在这个网站上提出的问题，如果我真的搜索过：）这段代码不会显示输入模糊上的错误消息？我没有看到它的任何配置，showAllMessage将显示错误，但在它们首先出现在blur事件上之后-我是否遗漏了什么？您说过“我只想在表单提交时为所有视图模型属性调用验证插件逻辑”。这检查错误，不是你想要的吗？对不起，我本想在提交时显示错误消息-我的错误答案在提交时显示消息。你是说你以前不想要它们？

ko.validation.init({
    insertMessages: false,
    messagesOnModified: true,
    parseInputAttributes: false
});

var submitted = ko.observable(false);

var saveDraft = function () {
    submitted(true);
    var isValid = poll.isValid();
    if (!isValid) {
        console.log('not valid!');
        poll.errors.showAllMessages(true);
        return;
    }
}
model.saveDraft = saveDraft;

    <div class="form-group">
        <div class="col-md-12">
            <label for="txtPollName" data-bind="">POLL NAME</label>
            <input type="text" class="form-control" id="txtPollName" placeholder="Enter a unique name for the poll." data-bind="value: poll().name">
            <div class="invalid-feedback" data-bind="visible: submitted(), validationMessage: poll().name">
            </div>
        </div>
    </div>

this.createPoll = function (parent, options) {
    var poll = new pollObject(parent, options);
    if (options && options.plain)
        return poll;
    var obs = ko.validatedObservable(null, { deep: true, live: true });
    obs(poll);
    return obs;
}