0

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:

  1. No permitir avanzar a la segunda pestaña si no e llenado los campos de la primera pestaña o paso uno.
  2. 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>

2 respuestas 2

0

Para hacer lo que te propobnes debes trabajar con javascript (cómo no has puesto nada de código JS estoy suponiendo que solamente estás usando las funcionalidades por defecto de los tabs).

Ahora, de acuerdo al manual online que te recomiendo que leas para obtener más información (https://getbootstrap.com/docs/4.0/components/navs/#via-javascript), puedes utilizar la activación/desactivación de los tabs directamente desde javascript:

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

También puedes activar cada tab individualmente de diferentes formas:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Y siempre por javascript podrás realizar todas las validaciones que necesites.

0

S.D valide lo que comentas pero no obtengo resultados ya que me envía error para leer el javascript. Verificando en internet me manda a importar unas librerias de Jquery, lo realizo y de igual forma no obtengo resultados.

Tengo este formulario que antes coloque dentro de un masterpage y en este ultimo es donde invoco las librerias y js, adjunto código.

$('#myTab li:last-child a').tab('show')
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MasterPage.master.vb" Inherits="Formulario.MasterPage" %>
<link href="Content/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" type="text/css" />
<link rel="stylesheet" href="Styles/Master.css">
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper" class="active">
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav" id="sidebar">
                    <loggedintemplate>
                        <%= ArmaMenu() %>
                    </loggedintemplate>
                </ul>
            </div>
            <div class="container-fluid" id="FormularioContenido">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <hr>
        </div>
    </form>
</body>

<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>

</html>

En mi segunda página estoy añadiendo el javascript $('#myTab li:last-child a').tab('show') para ver si hace algo pero envía el siguiente error Uncaught TypeError: $(...).tab is not a function

Favor su ayuda :(

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.