为淘汰赛添加验证

Question

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

$(document).ready(function () {
        var viewModel = new ViewModel();
        viewModel.load();
        ko.applyBindings(viewModel);

        $('#list').validate();
});

然后在我的 viewModel 中：

    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

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

根据您显示的代码，jQuery Validate 根本不应该工作。

您只能将.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：

在上面强调我原来的“注释”。您必须不重复name 属性，否则插件将失败。没有解决方法。您必须确保每个输入都包含一个唯一 name。

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