将验证添加到淘汰

Question

我正在尝试使用jquery验证。我正在通过ajax加载项目列表，加载我的淘汰模型。我想将验证绑定到这些项目。问题是验证消息仅显示在第一个输入框上。我做错了什么？

$(document).ready(function () {
        var viewModel = new ViewModel();
        viewModel.load();
        ko.applyBindings(viewModel);
        $('#list').validate();
});

然后在我的视图中模型：

    self.load = function (selected) {
        $.ajax({
            type: "POST",
            url: myUrl,
            data: ko.toJSON({ type: self.url(), customerNumbers: selected }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $(".demo-tbl").block({ message: "Loading..." });
            },
            complete: function () {
                $(".demo-tbl").unblock();
                // COMMENTED OUT $("input.percent-text").valid(); // validator
            },
            success: function (data) {
                ko.mapping.fromJS(data, {}, self);
            },
            error: function (err) {
                alert(err.status + " - " + err.statusText);
            }
        });
    };

渲染HTML：

                           <form id="list">
                            <table class="demo-tbl" data-bind='visible: List().length > 0'>
                                <thead>
                                </thead>

<tbody data-bind="foreach: List">
    <tr class="tbl-item" data-bind="css: HasDiscount">
        <td>
            <dl>
                <dt class="like" data-bind="text: CustomerName"></dt>
                <dd>Customer Number: <span data-bind="text: CustomerNumber"></span></dd>
            </dl>
        </td>
        <td>
            <span class="label label-sm label-warning" data-bind="css: HasDiscount, text: $root.DiscountListType"></span>
        </td>
        <td>
            <dl>
                <dt class="like">Activation Date:</dt>
                <dd data-bind="text: moment(ActivationDate()).format('LLL')"></dd>
            </dl>
        </td>
        <!-- ko if: $parent.DiscountListType() == "DiscountOverwrite" -->
        <td class="action">
            <input class="required number percent-text" name="percent" data-bind="numeric: Percent, value: Percent, event: { keypress: $root.update, blur: $root.update }" type="number" min="1" max="100" oninput="maxlength(this)" maxlength="3" />
        </td>
        <!-- /ko -->
        <td class="checkbox-cell">
            <button class="btn action" type="button" data-bind="click: $root.action, css: HasDiscount"></button>
        </td>
    </tr>
</tbody>
                            </table>
                        </form>

编辑1:

...
              complete: function () {
                    $(".demo-tbl").unblock();
                    $('#list').validate();
                },
...
$(document).ready(function () {
    if ($(".demo-tbl").length > 0) {
        var viewModel = new ViewModel();
        viewModel.load();
        ko.applyBindings(viewModel);
    }
});

Answer 1

"问题是验证消息只显示在第一个输入框上。我做错了什么？"

根据您显示的代码，jQueryValidate应该根本不起作用。

只能将.validate()方法附加到form，而不能附加到输入元素。

$(document).ready(function() {
    $('#list').validate(); // initialize plugin on your form
});

注意：name属性是插件跟踪字段的方式，因此重复名称会导致类似于您描述的跳过某些元素的情况。我想我在HTML的第一个版本中看到了一个重复的name

---

不能将.validate()方法附加到尚不存在的form元素。如果ajax()正在为form加载HTML，则在成功加载表单的HTML后立即调用.validate()。

与您注释掉对.validate()的调用的位置相同，只是这次它附加到form，而不是输入元素。

self.load = function (selected) {
    $.ajax({
        ....
        complete: function () {
            $(".demo-tbl").unblock();
            $('#list').validate(); // initialize validate plugin
        },
        ....
    });
};

---

编辑2:

强调我上面的原始"说明"。您必须NOT重复name属性，否则插件将失败。没有变通办法。您必须确保每个输入都包含一个唯一的name。

name="percent[1]"
name="percent[2]"
name="percent[3]"
....