Laravel中jQuery Validation克隆字段验证失效问题求助

在Laravel项目中集成jQuery Validation后，点击「Add New」按钮克隆的问题字段无法触发验证。原始字段验证正常，但留空克隆字段、仅填写原始字段时表单仍可提交。

HTML代码 #

<form id="form_sample_om" class="form_class" action="{{X_BASE_URL}}{{$skill_id}}skill-development-careers-career/post" method="post" enctype="multipart/form-data">
    @csrf
    <table>
        <tbody id="activity-list">
            <tr class="add-module-category">
                <td width="20%"><b>Question</b></td>
                <td width="100%" style="border-right:0;">
                    <textarea type="text" class="form-control question-field" name="new_skill_sheets[question][]" placeholder="" id="question_1"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
    
    <div class="form-group" id="clone-add-before">
        <button type="button" class="float-end btn btn-primary" id="addNew">Add New</button>
    </div>

    <div class="text-center">
        <button class="btn btn-primary" type="submit">Submit Now</button>
    </div>
</form>

原始Blade中的JavaScript代码 #

$(document).ready(function () {
 let questionCount = 1;

  function initializeValidation() {        //main validation function
   $("#form_sample_om").validate({
    rules: {
     "new_skill_sheets[question][]": {
      required: true,
     }
    },
    messages: {
     "new_skill_sheets[question][]": {
      required: "This field is required.",
       }
      }
     });
    }

    initializeValidation();

    $("#addNew").click(function () {                    //after clicking on Add New button
     questionCount++; // Increment question number
      let newQuestion = `
       <tr class="add-module-category">
        <td width="20%"><b>Question</b></td>
         <td width="100%" style="border-right:0;">
          <textarea required class="form-control question-field" name="new_skill_sheets[question][]" placeholder="" id="question_${questionCount}"> 
          </textarea>
         </td>
        </tr>
       `;

      $("#activity-list").append(newQuestion);        //append itself to original question

      // Add validation rules to the new field
      $("#question_" + questionCount).rules("add", {
       required: true,
       messages: {
        required: "This field is required.",
       },
      });

      initializeValidation();

     $("#form_sample_om").on("submit", function (e) {
      if (!$("#form_sample_om").valid()) {
       e.preventDefault();                         // Stop form submission if invalid
      }
     });

    });
});

问题分析与修复方案 #

核心问题点 #

1. HTML结构错误：原始问题字段未包裹在#activity-list容器内，导致克隆字段的DOM结构混乱，验证插件无法正确识别。
2. 重复初始化验证：每次点击「Add New」都重新调用initializeValidation()，会重置整个表单的验证规则，覆盖之前为克隆字段添加的规则。
3. 重复绑定提交事件：在addNew点击事件内重复绑定submit事件，会导致多次触发验证逻辑，且逻辑冗余。

修改后的代码 #

修改后的Blade JavaScript代码

$(document).ready(function () {
    let questionCount = 1;

    // 仅初始化一次验证规则，添加ignore: []确保动态字段不被忽略
    $("#form_sample_om").validate({
        rules: {
            "new_skill_sheets[question][]": {
                required: true,
            }
        },
        messages: {
            "new_skill_sheets[question][]": {
                required: "此字段为必填项。",
            }
        },
        ignore: []
    });

    // 仅绑定一次提交事件
    $("#form_sample_om").on("submit", function (e) {
        if (!$(this).valid()) {
            e.preventDefault();
        }
    });

    $("#addNew").click(function () {
        questionCount++;
        const newQuestion = `
            <tr class="add-module-category">
                <td width="20%"><b>Question</b></td>
                <td width="100%" style="border-right:0;">
                    <textarea class="form-control question-field" name="new_skill_sheets[question][]" placeholder="" id="question_${questionCount}"></textarea>
                </td>
            </tr>
        `;

        $("#activity-list").append(newQuestion);

        // 为新添加的字段绑定验证规则
        $("#question_" + questionCount).rules("add", {
            required: true,
            messages: {
                required: "此字段为必填项。",
            }
        });
    });
});

关键修改说明 #

• HTML结构修复：将原始问题字段放入<tbody id="activity-list">中，确保克隆字段的DOM结构统一。
• 单次验证初始化：移除重复初始化逻辑，仅在页面加载时初始化一次表单验证。
• 提交事件单次绑定：将表单提交事件移到document.ready中，避免重复绑定导致的逻辑混乱。
• 移除冗余属性：删除HTML中冗余的required属性，由jQuery Validation规则统一控制必填验证。

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