来自动态添加的文本字段的输入未通过 request()->validate() 数组

Posted 2023-03-21

【中文标题】来自动态添加的文本字段的输入未通过 request()->validate() 数组

【英文标题】：Input from Dynamically added text fields are not getting through to the request()->validate() array

【发布时间】：2021-12-10 15:50:21

【问题描述】：

我有一个表单，用户可以在其中输入从小学到大学的教育。如果他们想添加他们已经完成的任何其他研究，他们可以点击“添加其他研究”按钮，然后会为其他研究显示一组新的输入字段

 -- Button --
<tr>
        <td scope="col"><button type="button" onclick="addOtherStudies()" name="add-educ-exp" id="ar-educexp" class="btn btn-outline-primary">Add Other Studies</button></td>
</tr>
 -- Add Other Studies section --
 -- .d-none is display:none --
 <tr  class="d-none" id="otherStudiesRow">
          <th scope="row"><label for="other">Other Studies</label>
                    <input type="text" name="otherStudies[0]other_studies_name"/>
                    Degree/Major:<input type="text" name="otherStudies[0]other_studies_degree_major" placeholder="Masters Degree, Doctorate, Associate$quos, etc." />
          </th>
            <td>
                   <input type="text" style="width: auto; margin-top: 2rem;" name="otherStudies[0]other_studies_year"/><label for="units">If not complete, enter no. of units taken:</label><input type="text" style="width: auto;" name="otherStudies[0]other_studies_units" cols="10"/>
          </td>
           <td><textarea name="otherStudies[0]other_studies_awards" rows="3" cols="30"></textarea></td</tr>
                                <tr class="d-none" id="otherStudiesbuttons">
                                    <td><button type="button" onclick="addEducation()" name="add-educ-exp" id="ar-educexp" class="btn btn-outline-primary">Add Education</button></td>
                                    <td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td>

                                </tr>

我使用 javascript classList 属性在需要时显示/隐藏输入字段集 动态添加删除.js：

function addOtherStudies()
    var section = document.getElementById("otherStudiesRow");
    var buttons = document.getElementById("otherStudiesbuttons");

        section.classList.remove("d-none");
        buttons.classList.remove("d-none");

但是，当我单击按钮并添加数据时，输入字段中的值不会转发到 request()->validate() 数组： 这是我的控制器：

        $validatedEducExp = request()->validate([
            //education start at 0, length 12
            "elementary_name" => ['nullable','required_with:elementary_year,elementary_awards','max:100',new LetterSpaceOnly],
            "elementary_year" => ['nullable','required_with:elementary_name,elementary_awards',new fromToYearRule],
            "elementary_awards" => ['nullable','required_with:elementary_name,elementary_year','string'],
            "highschool_name" => ['nullable','required_with:highschool_year,highschool_awards','max:100',new LetterSpaceOnly],
            "highschool_year" => ['nullable','required_with:highschool_name,highschool_awards',new fromToYearRule],
            "highschool_awards" => ['nullable','required_with:highschool_name,highschool_year','string'],
            "college_name" => ['nullable','required_with:college_year,college_awards,degree,college_completed,college_awards','max:100',new LetterSpaceOnly],
            "college_year" => ['nullable','required_with:college_name,college_awards,degree,college_completed,college_awards',new fromToYearRule],
            "degree" => ['nullable','required_with:college_name,college_year,college_awards,college_completed,college_awards','alpha','min:4','max:100'],
            "college_completed"=> ['nullable','required_with:college_name,college_year,college_awards,degree,college_awards'],
            "college_units" => ['nullable','digits_between:1,2'],
            "college_awards" => ['nullable','required_with:college_name,college_year,college_awards,degree,college_completed','required_with:elementary_name,elementary_year','string'],

            //other studies start at 12, length 5
            'otherStudies.*.other_studies_name' => ['max:100',new LetterSpaceOnly],
            'otherStudies.*.other_studies_degree_major' => ['alpha','min:4','max:100'],
            'otherStudies.*.other_studies_year' =>  [new fromToYearRule],
            'otherStudies.*.other_studies_units' => ['digits_between:1,2'],
            'otherStudies.*.other_studies_awards' => ['string'],

            //exams start at 17, length 3
            'Exams.*.exam_name' => ['nullable','required_with: exam_grade,exam_date','max:100',new LetterSpaceOnly],
            'Exams.*.exam_grade' => ['nullable','required_with: exam_name,exam_date','digits_between:1,3'],
            'Exams.*.exam_date' =>  ['nullable','required_with: exam_date,exam_name','before_or_equal: today','date'],

            //work exp starts at 20 length 6
            'workExps.*.from' => ['nullable','digits:4'],
            'workExps.*.to' => ['nullable','digits:4'],
            'workExps.*.salary' =>  ['nullable','numeric'],
            'workExps.*.employer_name_address' => ['nullable','max:255','string'],
            'workExps.*.position' => ['nullable','min:5','max:50', new LetterSpaceOnly],
            'workExps.*.reason_for_leaving' =>  ['nullable','string',new LetterSpaceOnly],

            //seminar starts at 26,3
            'Seminars.*.title' => ['nullable','max:100',new LetterSpaceOnly],
            'Seminars.*.date' => ['nullable','before_or_equal: today','date'],
            'Seminars.*.conducted_by' =>  ['nullable','max:100',new LetterSpaceOnly],

            //skills starts 29, 2
            'languages' => ['nullable','max:255',new CommaSpace],
            'hobbies_skills' =>  ['nullable','max:255',new CommaSpace],

            //others info starts 31, length 3
            'blood_type' => ['nullable'],
            'health_problems' => ['nullable', 'max:255',new CommaSpace],
            'convictions' => ['nullable', 'max:255','string']
        ]);

当我在 otherStudies 输入字段中输入信息并在单击保存按钮时执行ddd() 时，只出现这个，并且找不到otherStudies 数组：

array:19 [▼
  "elementary_name" => null
  "elementary_year" => null
  "elementary_awards" => null
  "highschool_name" => null
  "highschool_year" => null
  "highschool_awards" => null
  "college_name" => null
  "college_year" => null
  "degree" => null
  "college_units" => null
  "college_awards" => null
  "languages" => null
  "hobbies_skills" => null
  "blood_type" => null
  "health_problems" => null
  "convictions" => null
  "Exams" => array:1 [▶]
  "workExps" => array:1 [▶]
  "Seminars" => array:1 [▶]
]

但是，当我返回页面时，由于old() 帮助器，输入的信息会保留在otherStudies 字段中，这意味着信息会保存到会话中，对吗？但无法前进到 validate() 函数。怎么回事？

【问题讨论】：

ID 必须是唯一的，那么您在哪里克隆研究？如果这是添加元素的 JavaScript 问题，请使用[<>] sn-p 编辑器发布minimal reproducible example 没有您的模板，因此只有 html、CSS 和 JavaScript

【参考方案1】：

将您的输入名称更改为

otherStudies[0][other_studies_name]
otherStudies[0][other_studies_degree_major]