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

Question

for a series of circumstances I need to update an old ASP classic site. My users need to fill one form that is divided in two divs that they can activate (display) clicking on a button.

Instead of doing complicate checks I found useful the required attribute of HTML 5 but unfortunately I have some problem when the required field is in the hidden part of the form.

If the user submits the form and the required field (not filled) is located in the hidden div the browser displays the alert but, obviously, not the field (because is in the hidden div ).

Is it possible to automatically show the hidden part of the form in which the required field is located?

Some code on the fly:

<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>

Let's say that you "forget" to fill the name field and you click on Next . You fill surname and you submit the form: immediately the embedded alert appears. Substantially I would like to intercept the event that highlights the required field and at the same time show the first div the one with the name.

Is it possible?

Answer 1

You could use jQuery when the submit button is clicked to show any required fields that are not visible:

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

And let the submit button call the function when clicked:

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

Answer 2

A much simpler logic will be if you check the name field onclick of Button1. If the name field is valid you can hide that and show the surname field. This will avoid showing already hidden name field, which breaks the ui flow and may be confusing for the user.