如何为动态生成的输入框添加Jquery Validation验证？

问题分析 #

• 现有验证规则仅绑定了初始输入框fieldrowItem_1，动态生成的新输入框未被纳入验证范围
• jQuery Validate不会自动识别动态插入的DOM元素，需手动为新元素添加验证规则
• 需求要求仅验证非占位符内容，需自定义专属验证逻辑

解决方案步骤 #

1. 自定义验证规则 #

添加自定义方法，判断输入内容是否不等于占位符且不为空：

// 自定义验证：输入值≠占位符且非空
$.validator.addMethod("notPlaceholder", function(value, element) {
    return this.optional(element) || value !== $(element).attr("placeholder");
}, "请输入非占位符内容");

2. 初始化表单验证 #

初始化时采用通用规则配置，同时确保初始输入框绑定验证：

function modalValidate() {
    $("#dialogMultipleChoiceGrid").validate({
        // 触发验证的时机
        onfocusout: function(element) {
            $(element).valid();
        },
        rules: {
            fieldrowItem_1: {
                required: true,
                notPlaceholder: true
            }
        },
        messages: {
            fieldrowItem_1: {
                required: "此字段不能为空",
                notPlaceholder: "请输入非占位符内容"
            }
        }
    });
}

3. 修改克隆逻辑，为新元素绑定验证 #

克隆后需为新输入框添加name属性（jQuery Validate核心依赖），并手动注入验证规则：

$("[id^='fieldrowItem_']").on('keypress', function keyPressHanlder(e) {
    if (e.which === 13) {
        let rowCount = $('[id^=newrowItem_]').length;
        let newrowCount = rowCount + 1;

        // 克隆最后一行容器
        let rowField = $("#newrowItem_" + rowCount).clone(true, true);
        rowField.attr("id", "newrowItem_" + newrowCount);

        // 处理新输入框
        let newInput = rowField.find("input");
        let newInputId = "fieldrowItem_" + newrowCount;
        let placeholder = "Row " + newrowCount;

        // 关键：添加name属性，Validate必须依赖该属性
        newInput
            .attr("id", newInputId)
            .attr("name", newInputId)
            .attr("placeholder", placeholder)
            .val('')
            .data("value", 0);

        // 为新输入框添加验证规则
        newInput.rules("add", {
            required: true,
            notPlaceholder: true,
            messages: {
                required: "此字段不能为空",
                notPlaceholder: "请输入非占位符内容"
            }
        });

        // 插入新行到目标位置
        $("#newrowItem_" + rowCount).after(rowField);

        // 移除当前输入框的回车事件
        $(this).off('keypress', keyPressHanlder);
    }
});

4. 修复HTML结构 #

确保所有输入框被表单#dialogMultipleChoiceGrid包裹，且初始输入框添加name属性：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<form id="dialogMultipleChoiceGrid">
    <div class='form-group'>
        <div class="col-sm-6 row">
            <label>Rows</label>
            <div class="input-group" id="newrowItem_1">
                <input type='text' id='fieldrowItem_1' name='fieldrowItem_1' class='form-control fieldrowItem' placeholder="Row 1" data-value="0">
                <div class="input-group-addon">
                    <span class="input-group-addon" style="display: none;cursor:pointer;" data-section="admin" onclick="RemoveRow_1()">
                        <i class="fa fa-times"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</form>

核心注意事项 #

• jQuery Validate必须依赖元素的name属性，动态生成元素务必设置唯一name值
• 动态添加DOM后，必须通过rules("add")手动注入验证规则
• 自定义验证方法需准确区分占位符与真实输入内容
• 克隆元素时注意重置value、data等状态属性，避免继承原元素数据

内容的提问来源于stack exchange，提问作者Jefferson