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

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的名称字段，则会有一个更简单的逻辑。如果名称字段有效，您可以隐藏它并显示姓氏字段。这将避免显示已隐藏的名称字段，这会打破ui流并且可能使用户感到困惑。