Ashraf Hassanein
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/jquer y.ui.all.c ss">
<link rel="stylesheet" href="css/validate.css">
<script src="js/jquery-1.10.1.min. js"></scri pt>
<script src="js/jquery-ui-1.10.3.c ustom.min. js"></scri pt>
<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.len gth)
{
alert("Complete All Missing Fields In All Tabs");
$('#tabs a[href="#' + jQuery(validator.errorList [0].elemen t).closest (".tab-pan e").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>
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/jquer
<link rel="stylesheet" href="css/validate.css">
<script src="js/jquery-1.10.1.min.
<script src="js/jquery-ui-1.10.3.c
<script src="js/jquery.validate.js
<link rel="stylesheet" href="css/demos.css">
<script>
$(document).ready(function
$( "#tabs" ).tabs();
$( "a, button" ).button().click(function(
// 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.len
{
alert("Complete All Missing Fields In All Tabs");
$('#tabs a[href="#' + jQuery(validator.errorList
}
}
});
}):
</head>
<body>
<form action="executescript.php"
<div id="tabs" class="tab-pane">
<ul>
<li><a href="#tabs-1">first</a></
<li><a href="#tabs-2">second</a><
<li><a href="#tabs-3">third</a></
</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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.