无法更改 HTML 文本字段的必需属性

Question

I'm building a web form that hides/shows various fields based on user selection.我正在构建一个基于用户选择隐藏/显示各种字段的 Web 表单。 Additionally, I want to change the required attribute of each element as they are shown/hidden.此外，我想在显示/隐藏时更改每个元素的必需属性。

The ".required = true | false" JavaScript code seems to work on select type elements, but not for the text type ones. ".required = true | false" JavaScript 代码似乎适用于选择类型元素，但不适用于文本类型元素。 Here's my code:这是我的代码：

 function ProjStrucHideShow(selection) { let d1 = document.getElementById("NameRow") let d2 = document.getElementById("ProjNameLabel") let d3 = document.getElementById("ProjName") let d4 = document.getElementById("ProgNameLabel") let d5 = document.getElementById("ProgName") let e1 = document.getElementById("StageRow") let e2 = document.getElementById("ProjStageLabel") let e3 = document.getElementById("ProjStage") let e4 = document.getElementById("ProgStageLabel") let e5 = document.getElementById("ProgStage") if (selection === "Project") { d1.style.display = "table-row"; d2.style.visibility = "visible"; d3.style.visibility = "visible"; d3.required = true; d3.value = null; d4.style.visibility = "hidden"; d5.style.visibility = "hidden"; d5.required = false; d5.value = null; e1.style.display = "table-row"; e2.style.visibility = "visible"; e3.style.visibility = "visible"; e3.required = true; e3.value = null; e4.style.visibility = "hidden"; e5.style.visibility = "hidden"; e5.required = false; e5.value = null; } if (selection === "Part of Program") { d1.style.display = "table-row"; d2.style.visibility = "visible"; d3.style.visibility = "visible"; d3.required = true; d3.value = null; d4.style.visibility = "visible"; d5.style.visibility = "visible"; d5.required = true; d5.value = null; e1.style.display = "table-row"; e2.style.visibility = "visible"; e3.style.visibility = "visible"; e3.required = true; e3.value = null; e4.style.visibility = "visible"; e5.style.visibility = "visible"; e5.required = true; e5.value = null; } if (selection === "Program") { d1.style.display = "table-row"; d2.style.visibility = "hidden"; d3.style.visibility = "hidden"; d3.required = false; d3.value = null; d4.style.visibility = "visible"; d5.style.visibility = "visible"; d5.required = true; d5.value = null; e1.style.display = "table-row"; e2.style.visibility = "hidden"; e3.style.visibility = "hidden"; e3.required = false; e3.value = null; e4.style.visibility = "visible"; e5.style.visibility = "visible"; e5.required = true; e5.value = null; } }

 <html> <head> </head> <body> <form> <table> <tr id="ContactRow"> <td id="ContactNameLabel" width="25%" nowrap required="required"><strong>Requestor Name*</strong></td> <td id="ContactName" width="25%"><input type="text" size="30" name="ContactName" required="required"></td> <td id="ContactPhoneLable" width="25%" nowrap><strong>Phone Number</strong></td> <td id="ContactPhone" width="25%"><input type="tel" size="30" name="ContactPhone"></td> </tr> <tr id="StructureRow"> <td id="ProjStrucLabel" width="25%" nowrap><strong>Structure*</strong></td> <td width="25%"> <select id="ProjStruc" name="ProjStruc" onchange="ProjStrucHideShow(this.value)" required="required"> <option value="">-- Select an Option --</option> <option value="Project">Project, Stands Alone</option> <option value="Part of Program">Project, Part of Program/Initiative</option> <option value="Program">Program/Initiative</option> </select> </td> </tr> <tr id="NameRow" style="display:none"> <td id="ProjNameLabel" width="25%" nowrap><strong>Project Name*</strong></td> <td id="ProjName" width="25%"><input type="text" maxlength="30" size="30" name="ProjName"></td> <td id="ProgNameLabel" width="25%" nowrap><strong>Program Name*</strong></td> <td id="ProgName" width="25%"><input type="text" maxlength="30" size="30" name="ProgName"></td> </tr> <tr id="StageRow" style="display:none"> <td id="ProjStageLabel" width="25%" nowrap><strong>Project Stage*</strong></td> <td width="25%"> <select id="ProjStage" name="ProjStage"> <option value="">-- Select an Option --</option> <option value="Definition">Definition</option> <option value="Planning">Planning</option> <option value="Execution">Execution</option> <option value="Closure">Closure</option> </select> </td> <td id="ProgStageLabel" width="25%" nowrap><strong>Program Stage*</strong></td> <td width="25%"> <select id="ProgStage" name="ProgStage"> <option value="">-- Select an Option --</option> <option value="Definition">Definition</option> <option value="Planning">Planning</option> <option value="Execution">Execution</option> <option value="Closure">Closure</option> </select> </td> </tr> <tr> <td align="center" colspan="4"> <input id="FormSubmit" name="FormSubmit" type="submit" value=" Submit "> </td> </tr> </table> </form> </body> </html>

Answer 1

I believe that element.required = true;我相信element.required = true; and element.required = false;和element.required = false; are valid here they are working live:在这里有效，他们正在现场工作：

Demo: https://codepen.io/Alexander9111/pen/rNVMPKK演示： https : //codepen.io/Alexander9111/pen/rNVMPKK

the problem was just in the dom element selection.问题只是在 dom 元素选择中。

The input tags are inside the table data elements with ids "ProjName" and "ProgName":输入标签位于表数据元素内，id 为“ProjName”和“ProgName”：

<td id="ProjNameLabel" width="25%" nowrap><strong>Project Name*</strong></td>
<td id="ProjName" width="25%"><input type="text" maxlength="30" size="30" name="ProjName"></td>
<td id="ProgNameLabel" width="25%" nowrap><strong>Program Name*</strong></td>
<td id="ProgName" width="25%"><input type="text" maxlength="30" size="30" name="ProgName"></td>

So you need to modify your dom selection to this:因此，您需要将 dom 选择修改为：

  let d2 = document.getElementById("ProjNameLabel")
  let d3 = document.querySelector("#ProjName > input")
  let d4 = document.getElementById("ProgNameLabel")
  let d5 = document.querySelector("#ProgName  > input")

Then it all works as expected.然后一切都按预期进行。

I also added conditional for when the user re-selects the "-- Select an option --" option.我还为用户重新选择“-- 选择一个选项--”选项添加了条件。

Full working demo: https://codepen.io/Alexander9111/pen/rNVMPKK完整的工作演示： https : //codepen.io/Alexander9111/pen/rNVMPKK

And below:和下面：

 function ProjStrucHideShow(selection) { let d1 = document.getElementById("NameRow") let d2 = document.getElementById("ProjNameLabel") let d3 = document.querySelector("#ProjName > input") let d4 = document.getElementById("ProgNameLabel") let d5 = document.querySelector("#ProgName > input") let d6 = document.getElementById("ProjDateLabel") let d7 = document.querySelector("#ProjDate > input") let e1 = document.getElementById("StageRow") let e2 = document.getElementById("ProjStageLabel") let e3 = document.getElementById("ProjStage") let e4 = document.getElementById("ProgStageLabel") let e5 = document.getElementById("ProgStage") let submit = document.getElementById('FormSubmit'); if (selection === "Select") { d1.style.display = "none" ; d2.style.visibility = "hidden" ; d3.style.visibility = "hidden" ; d3.required = false; d3.value = null ; d4.style.visibility = "hidden" ; d5.style.visibility = "hidden" ; d5.required = false; d5.value = null ; e1.style.display = "none" ; e2.style.visibility = "hidden" ; e3.style.visibility = "hidden" ; e3.required = false; e3.value = null ; e4.style.visibility = "hidden" ; e5.style.visibility = "hidden" ; e5.required = false; e5.value = null ; submit.disabled = true; d7.required = false; d7.value = ""; } else { submit.disabled = false; submit.disabled = false; d7.required = true; } if (selection === "Project") { d1.style.display = "table-row" ; d2.style.visibility = "visible" ; d3.style.visibility = "visible" ; d3.required = true ; d3.value = null ; d4.style.visibility = "hidden" ; d5.style.visibility = "hidden" ; d5.required = false; d5.value = null ; e1.style.display = "table-row" ; e2.style.visibility = "visible" ; e3.style.visibility = "visible" ; e3.required = true ; e3.value = null ; e4.style.visibility = "hidden" ; e5.style.visibility = "hidden" ; e5.required = false; e5.value = null ; } if (selection === "Part of Program") { d1.style.display = "table-row" ; d2.style.visibility = "visible" ; d3.style.visibility = "visible" ; d3.required = true ; d3.value = null ; d4.style.visibility = "visible" ; d5.style.visibility = "visible" ; d5.required = true ; d5.value = null ; e1.style.display = "table-row" ; e2.style.visibility = "visible" ; e3.style.visibility = "visible" ; e3.required = true ; e3.value = null ; e4.style.visibility = "visible" ; e5.style.visibility = "visible" ; e5.required = true ; e5.value = null ; } if (selection === "Program") { d1.style.display = "table-row" ; d2.style.visibility = "hidden" ; d3.style.visibility = "hidden" ; d3.required = false ; //.removeAttribute('required'); d3.value = null ; d4.style.visibility = "visible" ; d5.style.visibility = "visible" ; d5.required = true ; d5.value = null ; e1.style.display = "table-row" ; e2.style.visibility = "hidden" ; e3.style.visibility = "hidden" ; e3.required = false ; //.removeAttribute('required'); e3.value = null ; e4.style.visibility = "visible" ; e5.style.visibility = "visible" ; e5.required = true ; e5.value = null ; } }

 <html> <head> </head> <body> <form> <table> <tr id="ContactRow"> <td id="ContactNameLabel" width="25%" nowrap required="required"><strong>Requestor Name*</strong></td> <td id="ContactName" width="25%"><input type="text" size="30" name="ContactName" required="required"></td> <td id="ContactPhoneLable" width="25%" nowrap><strong>Phone Number</strong></td> <td id="ContactPhone" width="25%"><input type="tel" size="30" name="ContactPhone"></td> </tr> <tr id="StructureRow"> <td id="ProjStrucLabel" width="25%" nowrap><strong>Structure*</strong></td> <td width="25%"> <select id="ProjStruc" name="ProjStruc" onchange="ProjStrucHideShow(this.value)" required="required"> <option value="Select">-- Select an Option --</option> <option value="Project">Project, Stands Alone</option> <option value="Part of Program">Project, Part of Program/Initiative</option> <option value="Program">Program/Initiative</option> </select> </td> </tr> <tr id="NameRow" style="display:none"> <td id="ProjNameLabel" width="25%" nowrap><strong>Project Name*</strong></td> <td id="ProjName" width="25%"><input type="text" maxlength="30" size="30" name="ProjName"></td> <td id="ProgNameLabel" width="25%" nowrap><strong>Program Name*</strong></td> <td id="ProgName" width="25%"><input type="text" maxlength="30" size="30" name="ProgName"></td> </tr> <tr id="StageRow" style="display:none"> <td id="ProjStageLabel" width="25%" nowrap><strong>Project Stage*</strong></td> <td width="25%"> <select id="ProjStage" name="ProjStage"> <option value="">-- Select an Option --</option> <option value="Definition">Definition</option> <option value="Planning">Planning</option> <option value="Execution">Execution</option> <option value="Closure">Closure</option> </select> </td> <td id="ProgStageLabel" width="25%" nowrap><strong>Program Stage*</strong></td> <td width="25%"> <select id="ProgStage" name="ProgStage"> <option value="">-- Select an Option --</option> <option value="Definition">Definition</option> <option value="Planning">Planning</option> <option value="Execution">Execution</option> <option value="Closure">Closure</option> </select> </td> </tr> <tr id="DateRow" style="display:table-row" > <td id="ProjDateLabel" width="25%" nowrap><strong>Project Date*</strong></td> <td id="ProjDate"><input type="date" id="start" name="project-start" value="" min="2018-01-01" max="2020-12-31"></td> </tr> <tr> <td align="center" colspan="4"> <input disabled id="FormSubmit" name="FormSubmit" type="submit" value=" Submit " > </td> </tr> </table> </form> </body> </html>

UPDATE - yes it also works for date picker:更新 - 是的，它也适用于日期选择器：

无法更改 HTML 文本字段的必需属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-02-20 21:08:48

无法更改 HTML 文本字段的必需属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-02-20 21:08:48

解决方案1
0 已采纳 2020-02-20 21:08:48