隱藏表單字段，直到更早的字段被填充？

我有一個拆分的註冊表單。我正在尋找一種方法，最好使用css3，這將允許我隱藏表單字段，直到某個特定字段有效完成。隱藏表單字段，直到更早的字段被填充？

例如：我要求「組名」。當「組名稱」字段填充有一個有效的組名時，表示存在於數據庫或xml文件中（該部分需要js，而下拉不是選項），則會出現第二個字段：「組密碼」。

我使用html5和css3。如果絕對必要，我願意使用JavaScript。謝謝。

我想，我可以用這樣的：

document.getElementById("groupname").disabled = true

但我不確定如何觸發它。也許使用html5驗證可能會成爲觸發器？

來源

2013-02-03 David

你爲什麼要避免使用JavaScript？ –

目前沒有選擇器區分空的和填充的「輸入」元素（[至少我知道，至少]（http://www.w3.org/TR/selectors/））;所以JavaScript需要這個。 –

如果我必須，那麼我們將不得不滿足。 – David

一覽類似於下面的東西似乎工作：

:invalid ~ .test { 
    display: none; 
} 

<form> 
    <input type="text" required/> <!-- Displayed --> 
    <fieldset class="test"> 
     <input type="text"/> <!-- Hidden until top input is filled --> 
    </fieldset>   
</form>

應該能夠處理簡單的情況。然後可以使用setCustomValidity調用在您的驗證中連線來增強此功能。

來源

2013-02-04 02:43:19

這是[非常好的解決方法]（http://jsfiddle.net/davidThomas/vEDWt/）！（我的小提琴小提琴解開了'輸入'，所以他們是兄弟姐妹，因爲我很好奇你爲什麼包裹它。）+1 –

我將它包裝在'fieldset'中，以便作爲所有控件將在驗證後顯示。我可能一直在想我會開發一個更豐富的樣本，但後來只是懶惰:)。 –

隱藏表單字段，直到更早的字段被填充？

回答

相關問題