Question

我想使用Knockout.js突出显示表单上的错误。

目前，当我收到表单时，我看到所有错误，我想只有当用户按下“保存”按钮时才能获取它们。所以我试着设置一个标志，只有当用户按下它时才会成立，然后以所有形式使用它，但我没有成功。我会对此提供一些帮助。（或任何其他方式）所以我需要在我的html上使用这样的东西：

<div class='liveExample' data-bind="css: {hideErrors: !hasBeenSubmittedOnce()">

和我的js文件中的某处：

        this.hasBeenSubmittedOnce = ko.observable(false);

    this.save = function(){
        this.hasBeenSubmittedOnce(true);
    }

我的文件

HTML

<div class='liveExample' data-bind="css: {hideErrors: !hasBeenSubmittedOnce()">
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-3 control-label">Store:</label>
        <div class="col-sm-3" data-bind="css: { error: storeName.hasError() }">
            <input data-bind='value: storeName, valueUpdate: "afterkeydown"' />
            <span data-bind='text: storeName.validationMessage'> </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Company ID:</label>
        <div class="col-sm-3" data-bind="css: { error: companyId.hasError }">
            <input data-bind='value: companyId, valueUpdate: "afterkeydown"' />
            <span data-bind='text: companyId.validationMessage'> </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Address</label>
        <div class="col-sm-3" data-bind="css: { error: address.hasError }">
            <input data-bind='value: address, valueUpdate: "afterkeydown"' />
            <span data-bind='text: address.validationMessage'> </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Phone:</label>
        <div class="col-sm-3" data-bind="css: { error: phone.hasError }">
            <input data-bind='value: phone, valueUpdate: "afterkeydown"' />
            <span data-bind='text: phone.validationMessage'> </span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-4">
            <button class="btn btn-primary" data-bind="click: save">Add store</button>
        </div>
    </div>

</form>

商店：公司ID：地址电话：添加商店

</form>

JS

define(['knockout'], function (ko){

ko.extenders.required = function(target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    //define a function to do validation
    function validate(newValue) {
        target.hasError(newValue ? false : true);
        target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }
    validate(target());
    target.subscribe(validate);
    return target;
};

function AppViewModel(storeName, companyId, address, phone) {

    this.storeName = ko.observable(storeName).extend({  required:"" });
    this.companyId = ko.observable(companyId).extend({ required: "" });
    this.address = ko.observable(address).extend({ required: "" });
    this.phone = ko.observable(phone).extend({ required: ""});


    this.hasError = ko.computed(function(){
        return this.storeName.hasError() || this.companyId.hasError();
    }, this);


    this.hasBeenSubmittedOnce = ko.observable(false);

    this.save = function(){
        this.hasBeenSubmittedOnce(true);
    }

}

return AppViewModel;
});

CSS文件

    .form-group span {
    display: inherit;
}

.hideErrors .error span {
    display: none;
}

Answer 1

我为此做了一些努力，并且不确定它是否更好。

var showError=ko.observableArray([]);//it will store show Error Message
 ko.extenders.required = function(target, overrideMessage) {
 //add some sub-observables to our observable
 target.hasError = ko.observable();
 target.validationMessage = ko.observable();

 //define a function to do validation
 function validate(newValue) {
    target.hasError($.trim(newValue) ? false : true);
    target.validationMessage($.trim(newValue) ? "" : overrideMessage || "This field is required");

 }
 showError.push(function(){validate(target());});
 target.subscribe(validate);
 return target;
};

function AppViewModel(storeName, companyId, address, phone) {
 this.storeName = ko.observable(storeName).extend({  required:"" });
 this.companyId = ko.observable(companyId).extend({ required: "xcxcx" });
 this.address = ko.observable(address).extend({ required: "" });
 this.phone = ko.observable(phone).extend({ required: ""});


 this.hasError = ko.computed(function(){
    return self.storeName.hasError() || self.companyId.hasError();
 }, this);


 this.hasBeenSubmittedOnce = ko.observable(false);

 this.save = function(){
    ko.utils.arrayForEach(showError(),function(func){
       func();
    });
 }

}

ko.applyBindings(new AppViewModel());

Fiddle Demo

Answer 2

您可以使用可见的敲除绑定：

<div data-bind="visible: hasBeenSubmittedOnce">

对于错误类，您可以使用define默认的敲除验证类：'validationElement'并调用

 ko.validation.init({ decorateElement: true});

在这里你可以找到更多： https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration （请注意，decorateElement已经renamed 2013-11-21到'decorateInputElement'）

淘汰表格验证消息

2 个答案: