When user tries to submit form without entering data in a required field (class="required"), field is highlighted and given focus. Except when the field is a select option. The field is highlighted but user is not returned to the field. User has to scroll up in this case.
I need the form to scroll up to the highlighted field as it does with the other input types. Does anyone know the solution for this?
TIA.
Have you tried something like this? It scrolls me to the top where the select is in Firefox/Safari/Chrome.
$('#form').submit(function(e) {
if (yourSelectFailsValidaton) {
e.preventDefault();
$('select').focus();
}
});
I would do it with anchor tags. Create an anchor for each required input. Check the required inputs. If you find a blank one, jump to the corresponding anchor.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
function jumpToRequired() {
$("input.required").each(function() {
var input = $(this);
if (!input.attr("value")) {
window.location.hash = input.attr("id") + "_a";
return;
}
});
}
</script>
</head>
<body>
<a name="whatever_a"></a>
<input type="text" id="whatever" class="required" />
<button type="button" onclick="jumpToRequired()">Jump to required.</button>
</body>
</html>