Jquery form validation, return user to required field
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 开发者_StackOverflowselect 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();
}
});
http://jsfiddle.net/9YwDF/
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>
加载中,请稍侯......
精彩评论