javascript - 隐藏表单域直到前面的域被填充？

Question

我有一个拆分的注册表。我正在寻找一种方法，最好使用 css3，它允许我隐藏表单字段，直到有效完成特定字段。

例如:我请求“组名”。当 Group Name 字段填写有效的组名时，即存在于数据库或 xml 文件中的组名(这部分需要 js，并且下拉列表不是一个选项)，然后会出现第二个字段:“Group Password”。

我正在使用 html5 和 css3。如果绝对必要，我愿意使用 javascript。谢谢。

---

我想我可以使用这样的东西:

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

但我不确定如何触发它。也许使用 html5 验证可以作为触发器？

Answer 1

乍一看，类似以下的内容似乎有效:

: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 调用来增强您的验证。