簡體   English   中英

無法更改 HTML 文本字段的必需屬性

[英]Unable to change required attribute for HTML text fields

我正在構建一個基於用戶選擇隱藏/顯示各種字段的 Web 表單。 此外,我想在顯示/隱藏時更改每個元素的必需屬性。

".required = true | false" JavaScript 代碼似乎適用於選擇類型元素,但不適用於文本類型元素。 這是我的代碼:

 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>

我相信element.required = true; element.required = false; 在這里有效,他們正在現場工作:

在此處輸入圖片說明

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

問題只是在 dom 元素選擇中。

輸入標簽位於表數據元素內,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>

因此,您需要將 dom 選擇修改為:

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

然后一切都按預期進行。

我還為用戶重新選擇“-- 選擇一個選項--”選項添加了條件。

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

和下面:

在此處輸入圖片說明

 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>

更新 - 是的,它也適用於日期選擇器:

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM