Javascript - 根据表单选择切换 html5 required=“” 属性

Javascript - Toggle html5 required="" attribute based on form selection

本文关键字：required html5 属性 表单 选择 Javascript      更新时间：2023-09-26

我有一个几乎完成的脚本，但我无法弄清楚最后一块。 Javascript使复选框根据下拉选择出现或消失（这很好用）。 但是如果复选框存在，我正在尝试使复选框"必需"（我无法弄清楚的部分）。

我在复选框字段上使用 htm5 required="" 属性，但即使选择了第三个选项，表单仍然会尝试验证它，这会完全隐藏复选框。

有没有办法与下拉菜单的选择或任何其他建议协调打开/关闭required=""？

<script>    
   function getTerms(select){
        var selectedString = select.options[select.selectedIndex].value;
        if(selectedString == "1" || selectedString == "2")
        {
            document.getElementById("terms_target").style.display = "block";
        }else {
            document.getElementById("terms_target").style.display = "none";
        }
    }
</script>
<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

这是使用 addEventListener 的较新版本

window.addEventListener("DOMContentLoaded", () => {
  const sel = document.querySelector("[name=InquiryType]"),
    terms = document.getElementById("terms_target"),
    form = document.getElementById("myForm"),
    agree = form.checked; // checked is a poor name for a field
  toggleAgree = () => {
    const show = ["1", "2"].includes(sel.value);
    terms.hidden = !show;
    agree.required = show;
  };
  sel.addEventListener("change", toggleAgree)
  toggleAgree(); // initialise
})
<form action="process_affiliate.php" id="myForm" method="post">
  <select name="InquiryType" required>
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div id="terms_target" hidden>
    <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
  </div>
  <input type="submit" value="Submit">
</form>

旧版本

window.onload=function() {
  var sel = document.getElementsByName("InquiryType")[0];
  sel.onchange=function() {
    var selectedString = this.value,
        show = selectedString == "1" || selectedString == "2",
        terms = document.getElementById("terms_target"),
        checked=document.getElementsByName("checked")[0];
    terms.style.display = show?"block":"none";
    if (show) checked.setAttribute("required","required");
    else checked.removeAttribute("required");
  }
  sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

相关文章：