請沒有jQuery的解決方案使隱藏字段不要求
大家好。我已經搜索了所有的論壇,但找不到我找到的答案,因爲我發現了類似的問題,但它們似乎都是通過jquery解決的。我不想爲此使用jquery。
我想隱藏的字段不是我用於我的網站的表單所必需的。如何在輸入信息時要求字段輸入信息,但隱藏時不需要輸入信息?以下是我使用的代碼,它似乎在互聯網上很常見:
我也使用WordPress上的Contact Form 7來實現此代碼,並構建我的表單。顯示部分時
function HidePart(d) {
var x =document.getElementById(d);
x.style.display = "none";
x.setAttribute ("required", "false");
}
,當然,相反的:
<script type="text/javascript" language="JavaScript">
function HidePart(d) {document.getElementById(d).style.display = "none";}
function ShowPart(d) {document.getElementById(d).style.display = "block";}
function CheckboxChecked(b,d) {
if(b) {ShowPart(d);}
else {HidePart(d);}
}
</script>
<p><input type="checkbox" name="Form1" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv1')">More Info</p>
<!-- Form 1 -->
<div id="checkboxdiv1" style="display:none">
<p> Username: <input type="text" name="Usrname" required></p>
<p> FirstName: <input type="text" name="FirstName" required></p>
<p> LastName: <input type="text" name="LastName" required></p>
<p> MothersName: <input type="text" name="MothersName" required></p>
<p> FathersName: <input type="text" name="FathersName" required></p>
<p> SiblingsName: <input type="text" name="SiblingsName" required></p>
</div>
<!-- Form 2 -->
<p><input type="checkbox" name="Form2" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv2')">More Info</p>
<div id="checkboxdiv2" style="display:none">
<p> Username2: <input type="text" name="usrname2" required></p>
<p> FirstName2: <input type="text" name="FirstName2" required></p>
<p> LastName2: <input type="text" name="LastName2" required></p>
<p> MothersName2: <input type="text" name="MothersName2" required></p>
<p> FathersName2: <input type="text" name="FathersName2" required></p>
<p> SiblingsName2: <input type="text" name="SiblingsName2" required></p>
</div>
也許還可以刪除'required'屬性? – Gohn67
我可以做到這一點,但如果最終用戶有一個解決方案來驗證那裏的形式,那也會很棒! –