对可验证对象的集合进行淘汰验证

时间:2015-05-07 23:23:03

标签: javascript jquery validation knockout.js knockout-validation

所以我使用Knockout 2.3和Knockout Validation 2.0.2。我有一个viewModel,其属性是一个observableArray的自定义javascript" objects" (HRAdmin)。 HRAdmin有3个需要验证的属性。我在如何管理这种情况时遇到了困难。我尝试过不同的东西,但这就是代码所处的位置。

为了简洁起见,我已经删除了我的viewModel的所有其他属性,这些属性正好验证。但这也告诉我,我的其他代码都没有干扰。

您可以在此处运行并单步执行代码并查看即使您将所有字段留空并单击"转到步骤3和#34;链接,这行代码总是导致对象有效。

if(!obj [i] .isValid())

它不应该有效。 /建议的想法?



   // check validity of each object in array
   ko.validation.rules['collectionValidator'] = {
     validator: function(obj, params) {
       for (var i = 0; i < obj.length; i++) {
         if (!obj[i].isValid()) {
           obj[i].notifySubscribers();
           return false;
         }
       }
       return true;
     }
   };

   // validate a certain number of object exist in array
   ko.validation.rules['minArrayLength'] = {
     validator: function(obj, params) {
       return obj.length >= params.minLength;
     },
     message: "Must have at least {0} {1}"
   };

   ko.validation.registerExtenders();


   // HRAdmin "object"
   function HRAdmin() {
     this.FirstName = ko.observable("").extend({
       required: true,
       minLength: 1,
       maxLength: 50
     });
     this.LastName = ko.observable("").extend({
       required: true,
       minLength: 1,
       maxLength: 50
     });
     this.Email = ko.observable("").extend({
       required: true,
       minLength: 1,
       maxLength: 100,
       email: true
     });
   }


   var viewModel = function() {

     var self = this;

     // Must be at least one HRAdmin and all fields of EACH HRAdmin must validate
     self.HrAdmins = ko.observableArray([ko.validatedObservable(new HRAdmin())]).extend({
       minArrayLength: {
         params: {
           minLength: 1,
           objectType: "Account Manager"
         },
         message: 'Must specify at least one Account Manager'
       },
       collectionValidator: {
         message: 'Please check the Account Manager information'
       }
     });

     self.AddHrAdmin = function(data, event) {
       self.HrAdmins.push(new ko.validatedObservable(new HRAdmin()))
     };

     self.GoToStep3 = function(data, event) {
       // validate at least one HRAdmin and ALL fields on each are valid          
       if (!self.HrAdmins.isValid()) {
         self.HrAdmins.notifySubscribers();
         return;
       }

       // on to step 3 ...
     };
   };

   ko.applyBindings(new viewModel());
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.2/knockout.validation.min.js"></script>


<div data-bind="foreach: HrAdmins">
  <input type="text" placeholder="First Name" data-bind="value: FirstName" />
  <input type="text" placeholder="Last Name" data-bind="value: LastName" />
  <input type="text" placeholder="Email Address" data-bind="value: Email" />
</div>
<p data-bind="validationMessage: HrAdmins" class="validationMessage"></p>
<a href="#" data-bind="click: $root.AddHrAdmin">Add Manager</a>
<a href="#" data-bind="click: $root.GoToStep3">Go to Step 3</a>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

经过大量的追踪和错误后,我找到了解决方案。不确定它是否是最佳解决方案,但它运行正常。

我已经摆脱ko.validation.rules['collectionValidator']并添加了验证器分组。

self.HrAdminsErrors = ko.validation.group(self.HrAdmins, {deep: true, live: true});

操作代码如下:

http://jsfiddle.net/3b3o87dy/6/