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在您的验证中调用电汇来增强这一点。