Tengo el siguiente código que funciona perfectamente. El tema esta en que requiero que todas las pestañas (a excepción de la primera) se inhabiliten y luego realicen lo siguiente:
- No permitir avanzar a la segunda pestaña si no e llenado los campos de la primera pestaña o paso uno.
- Si selecciono o hago click en la pestaña dos (sin haber llenado los datos de la pestaña uno) este envíe un mensaje de alerta
E realizado por varias forma Javascript y nada, con Jquery no envia errores. Favor su ayuda, aquí dejo el código.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#AboutUs">About Us</a></li>
<li><a data-toggle="tab" href="#ContactUs">Contact Us</a></li>
<li><a data-toggle="tab" href="#Feedback">Feedback</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<div class="form row">
<label for="segauto" class="col-form-label col-sm-4">Nombre</label>
<div class="col-xs-4">
<input type="text" name="segauto" id="segauto" class="form-control" runat="server">
</div>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1"></option>
<option value="2">Option one</option>
<option value="3">Option tow</option>
</select>
</div>
</div>
</div>
<div id="AboutUs" class="tab-pane fade">
<h3>About Us</h3>
<p>Welcome to Bootstrap About us page. You can learn more about Bootstrap from W3 School.</p>
</div>
<div id="ContactUs" class="tab-pane fade">
<h3>Contact Us</h3>
<p>You can Mail me at:- [email protected]</p>
</div>
<div id="Feedback" class="tab-pane fade">
<h3>Feedback</h3>
<p>Feel Free to comment on my article in CSharpcorner .</p>
</div>
</div>
</div>
</body>
</html>