为敲除添加验证

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

"The problem is that the validation messages show up on the first input box ONLY. what am i doing wrong?"

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

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

以上强调我的原创"note"。您必须 NOT 重复 name 属性，否则插件将失败。没有解决方法。您必须确保每个输入都包含 unique name.

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

为敲除添加验证

Adding validation to knockout

jquery-validate

knockout-mapping-plugin

knockout.js