（Fiddle）

Question

我正在尝试对动态生成的控件进行验证。检查下面的小提琴链接

第1点：当我动态生成控件时，我没有ID'。所以jquery验证在这一点上是不可能的

第2点：以及我正在处理的是observables。所以我发现一些使用.extend做一些基本验证的文章。因为我在行中动态生成控件，现在我很困惑，如何使验证工作变得很酷。

小提琴链接：http://jsfiddle.net/JL26Z/16/ //这包含我的senario完整解释

非常感谢任何想法

谢谢

Answer 1

您可以创建验证对象并检查它是否没有错误，如下所示：关键部分位于function Phone()和self.save方法中;

（Fiddle）

HTML

<form id="employeeForm" name="employeeForm" method="POST">
    <script id="PhoneTemplate" type="text/html">
        <div>
            <div>
                <label>Country Code:</label>
                <input type="text" id="txtCountryCode"  data-bind="value:Code" />
            </div>
            <div><br/>
                <label>Date:</label>

                <input type="text" data-bind="value: Date"  />
            </div>
            <div>
                <label>Phone Number:</label>
                <input type="text" class="txtPhoneNumber" data-bind="value:PhoneNumber"  />
            </div>
            <input type="button" id="btnRemove" 
              value="Remove" data-bind="click: $parent.remove" />
        </div>
    </script>
    <div>
        <h2>Employee Information</h2>
        <div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}">
        </div>
        <div>
            <input type="button" id="btnAdd" 
              value="Add Another" data-bind="click: add" />
            <input type="submit" data-bind="click: save" />
        </div>
    </div>
</form>

JS

function Phone() {
    var self = this;
    self.Code = ko.observable("");
    self.Date = ko.observable("");
    self.PhoneNumber = ko.observable("");

    self.Validation = ko.validatedObservable([
        self.Code.extend({ required: true }),
        self.Date.extend({ required: true }),
        self.PhoneNumber.extend({ required: true })
    ]);
}

function PhoneViewModel() {
    var self = this;
    self.PhoneList = ko.observableArray([new Phone()]);
    self.remove = function () {
        self.PhoneList.remove(this);
    };
    self.add = function () {

        self.PhoneList.push(new Phone());
    };

    self.save = function () {
        var errors = 0;
        ko.utils.arrayForEach(self.PhoneList(), function (item) {
            if (item.Validation.errors().length != 0) {
                item.Validation.errors.showAllMessages();
                errors++;
            }
        });
        if(errors) {
            alert("has employee errors");
        }
        else {
            alert("all good");
        }
    }
}
ko.applyBindings(new PhoneViewModel());
$(document).ready(function () {

});

CSS

.validationMessage{
    color: red;
}

Answer 2

如果您想进行验证，可以从self.PhoneList()观察点轻松访问每个控件。

self.save = function () {
    var phonelist = self.PhoneList();
    for(var i=0;i<phonelist.length;i++){
        phonelist[i].Validate();
    }
}

见附件小提琴 http://jsfiddle.net/JL26Z/25/

淘汰赛中的验证？小提琴提供

2 个答案:

（Fiddle）

HTML

JS

CSS