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]"
....

添加验证到淘汰赛

1 个答案: