vendredi 28 février 2020

Setting Checkbox Required Attribute onClick

I'm building a web form that hides/shows table rows and sets certain fields required or not required based on user selections.

My question is two fold. First, how do I require users to check at least one box in the group of checkboxes called "ReallocationType"? I'm unsure what the code in "ValidateCheckboxes" function should look like. Secondly, how do I only enforce this only when "ReallocationTypeRow" is displayed?

   function ReqTypeHideShow(selection) {
           var s1 = document.getElementById("ReallocationRow")
  
           if (selection === "ReallocateCost") {
              s1.style.display = "table-row" ;
              //call function ValidateCheckboxes() ;
           }
        }

        function ValidateCheckboxes() {
               form.ReallocationType[0].checked === false
           //Need additional code here

               form.ReallocationType[1].checked === false
           //Need additional code here

               form.ReallocationType[2].checked === false
           //Need additional code here
        }
<table>
  <tr id="ReqTypeRow">
     <td>Request Type</td>
     <td>
        <select id="ReqType" name="ReqType" onchange="ReqTypeHideShow(this.value)">
           <option value="">-- Select an Option --</option>
           <option value="ReqDef">Request New Project</option>
           <option value="ProjAppr">Request Funding</option>
           <option value="ProjReappr">Request Re-approval</option>
           <option value="ReallocateCost">Re-allocate Funding</option>
        </select>
     </td>
  </tr>

  <br>

  <tr id="ReallocationTypeRow" style="display:none">
     <td>Reallocation Type (check all that apply)</td>
     <td>
        <input type="checkbox" name="ReallocationType" value="LabToExt">Internal to External Spend<br>
        <input type="checkbox" name="ReallocationType" value="ExtToLab">External to Internal Spend<br>
        <input type="checkbox" name="ReallocationType" value="LabToLab">Shift Internal Phases Around
     </td>
  </tr>
</table>

Thank you in advance for the help!




Aucun commentaire:

Enregistrer un commentaire