Question

对于一系列情况我需要更新旧的ASP经典网站。我的用户需要填写一个分为两个divs的表单，以便他们可以激活（显示）单击按钮。

我没有进行复杂的检查，而是发现HTML 5的required属性很有用，但不幸的是，当必填字段位于表单的隐藏部分时，我遇到了一些问题。

如果用户提交表单并且必填字段（未填写）位于隐藏div中，则浏览器会显示警报，但显然不是字段（因为隐藏在div中）。

是否可以自动显示required字段所在表单的隐藏部分？

动态的一些代码：

<form action="anagraphic.asp" method="post">
    <div id="divName" style="display:inline">
        Name <input id="inputName" name="inputName" type="text" required /> 
        <input name="Button1" type="button" value="Next"   
            onclick="document.getElementById('divName').style.display='none';document.getElementById('divSurname').style.display='inline';"/>
    </div>
    <div id="divSurname"style="display:none">
        <input name="Button2" type="button" value="Previous" 
            onclick="document.getElementById('divSurname').style.display='none';document.getElementById('divName').style.display='inline';" />
        Surname <input  id="inputSurname" name="inputSurname" type="text" required  />
        <input name="Submit1" type="submit" value="submit" />
    </div>

</form>

假设您“忘记”填写名称字段，然后点击下一步。您填写姓氏并提交表格：立即显示嵌入式警报。基本上我想截取突出显示所需字段的事件，同时显示名称中的第一个div。

有可能吗？

Answer 1

单击提交按钮以显示任何不可见的必填字段时，可以使用jQuery：

function foo()
{
  $("input[required]:hidden").parent().show()
}

点击提交按钮调用该函数：

<input name="Submit1" type="submit" value="submit" onclick=foo()/>

Answer 2

如果你点击Button1上的名称字段，那么将会有一个更简单的逻辑。如果 name 字段有效，您可以隐藏该字段并显示姓氏字段。这将避免显示已隐藏的名称字段，这会打破ui流并可能使用户感到困惑。

如果突出显示必填字段，如何显示隐藏的div？

2 个答案: