How focus/show a 'tab-pane' if tab field empty on bootstrap tab using jquery?
Question
I try to show a tab-pane in which field blank on Bootstrap tab. Here is my HTML:
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<form method="POST" id="frmUser">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">First Name</label>
<input type="text" name="mirst_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Middle Name</label>
<input type="text" name="middle_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Last Name</label>
<input type="text" name="last_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Email Address</label>
<input type="text" name="email" class="form-control">
<button type="submit" class="btn btn-primary" name="save">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
On Submit at Last tab ' Settings check all tab field not blank, if blank show the particular tab-pane.Also set 'nav-tabs'
DEMO jsfiddle
3 answers
solution1
0 2015-11-26 15:25:36
Script
$('input[name=save]').on('click',function(){
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
var bool=false;
var bool=$.each(tabs,function(i,v){
if($(v).val().length<=0){
$('ul.nav li:eq('+i+')').addClass('active');
$(v).parent().parent().parent().addClass('active');
$(this).focus();
return false;
}
})
if(bool=true){window.location.href='http://google.com'}
});
// change the button button to input in html as shown below
html
<input type="button" class="btn btn-primary " name="save" value="submit"></button>
solution2
0 2015-11-26 15:26:44
complete example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<form method="POST" id="frmUser">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">First Name</label>
<input type="text" name="mirst_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Middle Name</label>
<input type="text" name="middle_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Last Name</label>
<input type="text" name="last_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Email Address</label>
<input type="text" name="email" class="form-control">
<input type="button" class="btn btn-primary " name="save" value="submit"></button>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
$('input[name=save]').on('click',function(){ alert('hi');
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
var bool=false;
var bool=$.each(tabs,function(i,v){
if($(v).val().length<=0){
$('ul.nav li:eq('+i+')').addClass('active');
$(v).parent().parent().parent().addClass('active');
$(this).focus();
return false;
}
})
if(bool=true){window.location.href='http://google.com'}
});
</script>
</body>
</html>
solution3
-1 2015-11-27 06:57:29
Find the below jquery script for the functionality
$(document).on('click','button[name="save"]',function(){
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li,.tab-pane').removeClass('active');
var bool=false;
$.each(tabs,function(index,value){
if($(this).val().length<=0){
$('ul.nav li:eq('+index+')').addClass('active');
$('.tab-content .tab-pane:eq('+index+')').addClass('active');
$(this).focus();
return false;
}
});
return false;
});
Demo link : http://jsfiddle.net/asimshahiddIT/p7n9vdon/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
MixitUp Not working with Bootstrap tab-pane
Databinding Error using bootstrap tab-pane and accordions
How to use links in a bootstrap nav tab-pane?
how to add and remove multiple class in tab-pane in jquery or javascript
How to add addclass jQuery function in tab-pane html boostrap?
Dynamically adding a tab in bootstrap doesn't show tab-pane content after navigating away and back
How to check which tab-pane is active
bootstrap tab dropdown not working after adding tab-pane
ng-repeat on bootstrap tab-content/tab-pane
How to show active tab-pane inside tab-container on click event?
Related Tags