Question

我有以下把手模板：

<script id="hbar_task_config_holder" type="text/x-handlebars-template">

    <div class="row task_config_holder" id="task_config_each_holder">
        {{#tasks}}
        {{> config_row types=../types}}
        {{/tasks}}
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12" style="margin-bottom: 12px;">
        <button class="btn btn-purple btn-sm" id="add_task" >
            <i class="icon-plus bigger-110"></i>
            Add Task
        </button>
    </div>
</script>

这包括以下模板partial：

<script id="config_row-partial" type="text/x-handlebars-template">
    <div class="row col-xs-12">
        <input type="hidden" id="task_id" value="{{id}}">
        <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12" style="margin-bottom: 12px;">
            <input type="text" name="title[]" class="req col-xs-12" value="{{title}}" placeholder="Title" />
        </div>
        <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12" style="margin-bottom: 12px;">
            <input type="text" class="req col-xs-12" name="url[]" value="{{url}}" placeholder="URL"/>
        </div>
        <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12" style="margin-bottom: 12px;">
            <input type="text" class="req col-xs-12" name="description[]" value="{{description}}" placeholder="Description"/>
        </div>
        <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 " style="margin-bottom: 12px;">
            <input type="text" class="req col-xs-6" name="amount[]" value="{{amount}}" placeholder="Amount"/>
        </div>
    </div>
</script>

现在我有一个选中的选择框，在onchange中，它将编译整个模板并将其附加到ID为#task_form的表单内的div，当我点击Add Task时，它动态地附加在partial模板中指定的输入元素。我正在尝试使用jQuery验证器插件为此添加表单验证。我尝试了很多场景，但似乎没有任何效果。我不知道这是否是向动态元素添加验证规则的正确方法，但我现在有以下代码：

jQuery(function ($) {

    $('#task_form').on('submit', function (event) {

        // prevent default submit action
        event.preventDefault();

        $("input.req").each (function (){
            console.log($(this));
            $(this).rules( "add", {
                required: true,
            });
        });

        // test if form is valid
        if($('#task_form').validate().form()) {
            console.log("validates");
        } else {
            console.log("does not validate");
        }

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

这给我一个错误：

未捕获的TypeError：无法读取属性＆＃39;设置＆＃39;未定义的在init.rules（jquery.validate.min.js：2）在HTMLInputElement。（3：25）在Function.each（jquery-2.0.3.min.js：4）在init.each（jquery-2.0.3.min.js：4） at：1：16

我尝试过其他一些解决方法，例如在函数中添加以下代码，即添加动态输入元素。

$(#task_form).removeData('validator');
$(#task_form).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(#task_form);

但这又引发了另一个错误

未捕获的TypeError：无法读取属性＆＃39;解析＆＃39;未定义的时间：3：24

很抱歉这篇长篇文章，任何帮助将不胜感激。

带有动态字段和数组输入的把手模板的jQuery验证

0 个答案: