标签: knockout-validation

我想select在我的视图中为一个元素添加一个CSS类,我的视图模型有一个我使用Knockout-Validation扩展的属性:

self.selectedRootCause = ko.observable().extend({
    required: true
});

然后我select是这样的:

<form data-bind="submit: closeComplaint" method="post"> 
    <select data-bind="options: rootCauses, 
                            optionsText: 'RootCauseText', 
                            value: selectedRootCause, 
                            optionsCaption: 'Choose..',
                            validationOptions: { errorElementClass: 
                                                 'input-validation-error' }">
    </select>

    <input type="submit" value="Close Complaint" />
</form>

我的closeComplaint功能看起来像这样:

self.closeComplaint = function () {
    if (self.errors().length == 0) {
        $.ajax({
            url: '@Url.Action("CloseComplaint")',
            data: new DetailsComplaintAdmin(self.currentComplaint(),
                                        self.selectedRootCause().RootCauseId
                ),
            success: function (data) {
                console.log(data);
            }
        });
    }
}

只是为了完成,这是我的self.errors()功能:

self.errors = ko.validation.group(self);

问题是,当我提交表单时,类input-validation-error似乎没有添加到我的select输入中？有任何想法吗？

是什么在差异ko.validation.group和ko.validatedObservable？是否有特殊情况我应该使用一个而不是另一个？

我的viewmodel中有以下属性,它们使用敲除验证,其中一个是自定义验证来检查密码匹配.

model.Password = ko.observable()
                  .extend({ required: { message: "Password is required.", 
                        params: true,
                        onlyIf: function () { return model.IsCredentialsRequired(); }}
                    });


model.ConfirmPassword = ko.observable().
                        extend({ validation: { validator: mustEqual,
                        message: 'Passwords do not match.',
                        params: model.Password,               
                        onlyIf: function () { return model.IsCredentialsRequired(); } }
                    });

自定义验证功能的代码

var mustEqual = function (val, other) {
                return val == other();
            };

我发现OnlyIf条件工作正常model.Password取决于 model.IsCredentialsRequired()但它不起作用model.ConfirmPassword,有人可以帮助我为什么会发生这种情况吗？有没有其他方法我可以使用条件验证自定义规则？

提前致谢

我没有使用Knockout验证,我试图了解它可以做些什么.

我正在试图弄清楚当出现错误时是否可以在输入标签的右侧显示图标而不是错误消息.并且,如果用户将鼠标悬停在图标上,则会显示错误消息.

有没有人这样做或者想知道如何做到这一点？

谢谢.

编辑:(我正在尝试做的更详细的例子)

假设我在视图模型中有以下内容:

var firstName = ko.observable().extend({required: true});

我的HTML:

<input data-bind="value: firstName" />

我的理解是,如果第一个名称文本框留空,则(默认情况下)文本框右侧会显示一些文本,说明此字段是必需的.

我想要了解的是如何更改右侧显示错误文本的默认行为,在右侧显示一个图标,当悬停在上面时,会弹出错误信息.

所以,一个开始将是这样的:

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
    //This icon should only display when there is an error
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/>

    //css/javascript would display this when user hovers over the above icon
    <span data-bind="validationMessage: field"  />  
</div>

如果我正确使用messageTemplate功能,我不知道.我也不知道在customTemplate中绑定文本的内容,以便为每个错误显示正确的错误消息.IOW,firstname和lastname可能有自定义错误消息.如果它们都使用相同的模板,模板如何适应自定义错误消息？

我希望这是有道理的.

我正在使用MVC 4进行knockout.js淘汰验证.我可以通过敲除验证来执行客户端验证.但是我需要确保发布到我的控制器的任何视图模型都是有效的.因此,我手动验证我的视图模型服务器端并返回序列化为JSON的模型状态(同事编写了一个简单的函数来执行此操作).我的问题是我想知道如何使用knockout-validation来使用JSON序列化模型状态来输出错误.

那么有没有办法在淘汰验证中手动添加错误和消息？

我正在使用Knockout Validation来验证数组中的字段.它将显示错误消息,但我无法使用isValid()或ko.validation.group()来工作.我需要其中一个来处理提交.

errors = ko.validation.group(contactList(), {deep:true});

这是小提琴:http://jsfiddle.net/mduey/hEJWJ/80/

谢谢!

我有ko.observableArrays和项目验证.用户可以将项目标记为已删除.当它被标记为已删除时,我需要禁用该项目的验证.

你如何动态禁用验证？

示例:http://jsfiddle.net/3RZjT/2/

<div data-bind="foreach: names">
    <input data-bind="value: name, valueUpdate: 'afterkeydown'" /> <a data-bind="click: deleteMe, text:deleted()?'undelete':'delete'" href="#">delete</a><br/>
</div>

function Person(name){
    var self = this;
    self.name = ko.observable(name).extend({ required: true});
    self.deleted = ko.observable(false);
    self.deleteMe = function(){ 
        self.deleted(!self.deleted());
        self.deleted.extend({ validatable: !self.deleted()});
    };
}

var viewModel = {
    names: ko.observableArray([new Person("Ken"), new Person("")])
};

ko.applyBindings(viewModel);

我正在使用Durandal,而Durandal又利用了Knockout.

我希望能够动态更改验证长度

小提琴

小提琴似乎与我的"工作"解决方案略有不同,但它仍然没有做我想要/期待的事情.

Viewmodel JS:

[尝试1]

define(function () {

   var self = this;

   self.userInfo = {       
        IdOrPassportNumber: ko.observable().extend({
            required: true,
            pattern: {
                message: 'A message',
                params: /some regex/
            }
        }),
        IdType: ko.observable()
    },

    self.isIdValid = ko.validatedObservable({ 
         IdOrPassportNumber: self.userInfo.IdOrPassportNumber 
    });

    self.userInfo.IdOrPassportNumber.subscribe(function (value) {
          if (isIdValid.isValid()) {
               console.log('YOLO!');
          }
    });

    self.userInfo.IdType.subscribe(function (value) {
        console.log(value);
        if (value === 'Passport') {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 15 });
        } else {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 13 });
        }
    });    

    var viewModel = {
        userInfo: self.userInfo
    };

    viewModel["errors"] …

我正在使用这个插件https://github.com/ericmbarnard/Knockout-Validation,我正在尝试验证动态加载的对象.

使用Javascript:

function VM() {
    var self = this;
    // This is a static observable, just to ensure that basic validation works fine.
    self.static = ko.observable();
    self.static.extend({required: true});

    // This is the observable that will be updated to my model instance.
    self.person = ko.observable({});

    // This is an handler for manual trigger.
    // I'm not even sure this is needed.
    self.a = function(){
        self.errors.showAllMessages();
        self.staticErrors.showAllMessages();
    }

    // Here i'm loading current person from somewhere, i.e. a rest service. …

我确实在提交验证时查看了我的视图模型, 如此处所述.

除"提交"操作外,我的表单还有"保存进度"操作.它以相同的方式提交给服务器,但所需的字段较少.

我想保留它们目前在View Model中的四个绝对必需的字段... 即将它们保存在更大的验证组中以供提交.

Knockout Validation中是否有一种方法可以像showAllMessages()完整验证组一样简单地显示特定消息？我查看了源代码,但找不到任何showMessage()附加到单个错误的内容.

或者,有没有办法从我的视图模型中选择字段并将它们放在自己的验证组中(但也将它们保存在更大的组中)？

所以,作为一个例子:

var ViewModel = ko.validatedObservable({
  requiredForSave1:  ko.observable().extend({ required: true }),
  requiredForSave2:  ko.observable().extend({ required: true }),
  requiredForSubmit: ko.observable().extend({ required: true })
  // ... and many more.
});

$('#sumbit').on('click', function(){

  //check the entire validation group
  if ( ViewModel.errors().length === 0 ){
    doSubmit();
  }
  else{
    ViewModel.errors.showAllMessages();
  }
});

$('#save').on('click', function(){

  //check only part of the validation group
  if ( ViewModel.requiredForSave1.isValid() &&
       ViewModel.requiredForSave2.isValid() ){

    doSubmit();
  } …