asked on

Change the focus of the next tab where the validation fails

I have a one form in 3 jquery tab at which I am running the jquery validate.
One I press the submit it validates all the field, but I want it to focus on the second tab which has an error and not stay on the current tab, I have read in the following link that this is possible but, the command in this link is not working.
i.e. (The alert is indeed is working, so I assume something wrong in the syntax of the command below):

http://stackoverflow.com/questions/18179148/using-jquery-to-switch-to-focus-a-tab-with-a-validation-error
In the test page published in this link I can see that this command in commented as well.

Here is my html page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create User</title>
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="css/validate.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.validate.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script>
$(document).ready(function() {
$( "#tabs" ).tabs();
$( "a, button" ).button().click(function( event ) {event.preventDefault();});
// validate createuser form on keyup and submit
var validator = $("#createuser").validate({
rules: {},
messages: {},
ignore: "", //To force validator to validate all tabs prios sending - start from jquery 1.9
invalidHandler: function(event, validator){
if(validator.errorList.length)
{
alert("Complete All Missing Fields In All Tabs");
$('#tabs a[href="#' + jQuery(validator.errorList[0].element).closest(".tab-pane").attr('id') + '"]').tab('show'); //As I understood that will focus on the second tab which has an error
}
}
});
}):
</head>
<body>
<form action="executescript.php" name="createuser" id="createuser" method="POST">
<div id="tabs" class="tab-pane">
<ul>
<li><a href="#tabs-1">first</a></li>
<li><a href="#tabs-2">second</a></li>
<li><a href="#tabs-3">third</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
<div class="Create User">
<center><input type="submit" id="lcreateusersubmit" value="Create Subscriber"></center>
</div>
</form>
</body>
</html>

SOLUTION

teodor birca

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Sar1973

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial