2014-12-30 110 views
1

請沒有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> 
+0

也許還可以刪除'required'屬性? – Gohn67

+0

我可以做到這一點,但如果最終用戶有一個解決方案來驗證那裏的形式,那也會很棒! –

回答

0

嘗試這樣的事情。

+0

Darn,這看起來應該可以工作,但它不在WordPress的Contact Form 7插件中。我應該放置這個功能有什麼特別的地方嗎? –

+0

我剛剛通過將'document.getElementById'的結果保存在一個變量中,修改了'HidePart',然後向其中添加了'setAttribute'。所以,把它放在你的'HidePart'和'ShowPart'函數已經在的地方。 –

0

爲什麼不在javascript中添加required =「true」來顯示和隱藏?

+1

您能否詳細說明您的評論? –