Javascript - 根據表單選擇切換html5 required =「」屬性

我有一個腳本幾乎完成，但我無法弄清楚最後一塊。 Javascript使複選框出現或消失基於下拉選擇（這是工作很好）。但是我試圖使複選框「必需」，如果複選框存在（我無法弄清楚的部分）。Javascript - 根據表單選擇切換html5 required =「」屬性

我在複選框字段上使用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>

來源

2015-03-13 BradM

如何你的函數被調用？ – j08691 2015-03-13 15:59:53

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>

來源

2015-03-13 16:02:20 mplungjan

'terms.setAttribute（「required」，true）'因爲['required']（http://www.w3.org/TR/html5/forms.html#the-required-attribute）是一個[boolean屬性（http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute）。使用'terms.setAttribute（「required」，「」）或'terms.setAttribute（「required」，「required」）'。或者更好的是，使用IDL屬性來代替：'terms.required = show'。 – Oriol 2015-03-13 16:49:41

謝謝，我試過這個，但是我沒有驗證這個複選框。該表格可以不提供複選標記，但不應該提交。 – BradM 2015-03-13 16:58:28

你在表單上有onchange，而不是select。我曾經要求在div上，而不是複選框 – mplungjan 2015-03-13 18:18:51

Javascript - 根據表單選擇切換html5 required =「」屬性

回答

相關問題