如何验证表格中多个<tr>内的表单？解决保存时验证失效问题

你的问题出在点击按钮时才初始化验证规则，jQuery Validate插件需要在DOM加载完成后就绑定到表单上，而不是触发点击事件时才初始化，否则验证逻辑无法提前绑定，导致.valid()无法正常工作。

修正后的代码实现 #

$(function() {
    // 页面加载完成后，提前初始化所有行内表单的验证规则
    $tableID.find('tr form').each(function() {
        $(this).validate({
            rules: {
                job_step: "required" // 确保表单内对应输入框的name属性是job_step
            },
            submitHandler: function(form) {
                // 验证通过后的提交逻辑，比如AJAX提交或表单提交
                alert("Submitted!");
                // 若用AJAX提交，需返回false阻止默认表单跳转
                return false;
            }
        });
    });

    // 绑定保存按钮的点击事件
    $tableID.on('click', '.save', function() {
        // 找到当前按钮所在行的表单
        var $form = $(this).closest('tr').find('form');
        // 触发表单验证
        if ($form.valid()) {
            // 验证通过，手动提交表单（会触发submitHandler）
            $form.submit();
        }
    });
});

关键说明 #

1. 提前初始化验证：在DOM加载完成后，遍历所有行内表单并绑定验证规则，确保插件提前监听表单字段的变化。
2. 精准定位表单：用closest('tr')替代parents('tr')，只会找到最近的父级<tr>元素，避免匹配到嵌套结构中的其他tr。
3. 触发验证与提交：点击按钮时直接调用.valid()触发验证，验证通过后调用submit()触发submitHandler内的逻辑。

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