0

Estoy construyendo un formulario, el cual tiene validaciones de bootstrap.

Por alguna razón, algunas de estas, no se están mostrando.
Todas las que marcan rojo, tienen un div que se muestra con su error, pero por alguna razon, la clase o el css que debe mostrarlo, que debe hacer el cambio de display, no lo está haciendo y necesito ayuda con eso.

Acá un ejemplo de lo que hablo:

Clase aplicando BIEN el display: block

Clase no aplicando el display: block

<body>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="css/cajas.css">
  <script>
    $(document).ready(function() {
      $("#inputProduccion").datepicker({
        closeText: 'Cerrar',
        prevText: '<Ant',
        nextText: 'Sig>',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
        weekHeader: 'Sm',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
      }) /*.datepicker("setDate", new Date())*/ ;
    });

  </script>



  <div class="banner">
    <div class="card">
      <div class="card-body">
        <h1>Ingreso de Datos</h1>
        <hr>
        <form method="POST" novalidate="">
          <div class="form-group">
            <label for="inputRutEmpresa" class="float-left">Rut Empresa</label>
            <input type="text" class="form-control is-invalid" id="inputRutEmpresa" name="rutEmpresa" placeholder="Rut de Empresa" value="" required="">
            <div class="invalid-feedback float-left">
              Ingrese un rut válido por favor </div>
          </div>
          <div class="form-group">
            <label for="inputNombreRazon" class="float-left">Nombre / Razon Social</label>
            <input type="text" class="form-control is-invalid" id="inputNombreRazon" name="razonSocial" placeholder="Nombre o Razon Social" value="" required="">
            <div class="invalid-feedback float-left">
              Ingrese Nombre o Razón Social </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputRutRepresentante" class="float-left">Rut Representante</label>
                <input type="text" class="form-control is-invalid" id="inputRutRepresentante" name="rutRep" placeholder="Rut Representante" value="" required="">
              </div>
              <div class="invalid-feedback float-left">
                Ingrese un rut válido por favor </div>
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputRepresentante" class="float-left">Nombre Representante</label>
                <input type="text" class="form-control is-invalid" id="inputRepresentante" name="nomRep" placeholder="Nombre Representante" value="" required="">
              </div>
              <div class="invalid-feedback float-left">
                Ingrese Nombre de Representante </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputDistribuidor" class="float-left">Distribuidor</label>
            <select name="distribuidor" class="custom-select is-invalid" required="">
              <option value="">Seleccione Distribuidor...</option>
              <option value="1">ONE</option>
              <option value="2">Gerson</option>
              <option value="3">NGR</option>
              <option value="4">Otro</option>
            </select>
            <div class="invalid-feedback float-left">
              Seleccione un Distribuidor </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputSucursal" class="float-left">Sucursal</label>
                <input type="number" class="form-control is-invalid" id="inputSucursal" name="sucursal" required="">
              </div>
              <div class="invalid-feedback float-left">
                Seleccione un Sucursal </div>
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputEquipo" class="float-left">Equipo</label>
                <input type="number" class="form-control" id="inputEquipo" value="1" required="">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputCaja" class="float-left">ID Caja</label>
                <input type="text" class="form-control" id="inputCaja" value="1" required="">
              </div>
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputServidor" class="float-left">Servidor</label>
                <input type="text" class="form-control" id="inputServidor" value="1" required="">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputProduccion" class="float-left">Fecha Produccion</label>
            <input type="text" readonly="" autocomplete="off" class="form-control is-invalid hasDatepicker" id="inputProduccion" name="fechaProduccion" required="">
            <div class="invalid-feedback float-left">
              Seleccione una fecha </div>
          </div>
          <button type="submit" class="btn btn-primary">Ingresar</button>
          <input type="reset" class="btn btn-warning" value="Limpiar" onclick="$('.is-invalid').removeClass('is-invalid');">
        </form>
      </div>
    </div>
  </div>


  <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>

4
  • Mmm... ¿Están bien cerrados los div?
    – padaleiana
    Commented el 22 nov. 2021 a las 13:00
  • @padaleiana Me sigues al chat ?? chat.stackexchange.com/rooms/131663/excorpions-room
    – Excorpion
    Commented el 22 nov. 2021 a las 13:31
  • Lo vi muy tarde :(
    – padaleiana
    Commented el 22 nov. 2021 a las 14:17
  • @padaleiana no pasa nada, ya me explicaron que el error no era en el cierre de divs, sino en donde estaban. Debian estar dentro del form-group y no fuera de este.
    – Excorpion
    Commented el 22 nov. 2021 a las 14:17

1 respuesta 1

1

Tu problema es debido a que tienes los </div> mal ubicados.

<body>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="css/cajas.css">
  <script>
    $(document).ready(function() {
      $("#inputProduccion").datepicker({
        closeText: 'Cerrar',
        prevText: '<Ant',
        nextText: 'Sig>',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
        weekHeader: 'Sm',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
      }) /*.datepicker("setDate", new Date())*/ ;
    });

  </script>



  <div class="banner">
    <div class="card">
      <div class="card-body">
        <h1>Ingreso de Datos</h1>
        <hr>
        <form method="POST" novalidate="">
          <div class="form-group">
            <label for="inputRutEmpresa" class="float-left">Rut Empresa</label>
            <input type="text" class="form-control is-invalid" id="inputRutEmpresa" name="rutEmpresa" placeholder="Rut de Empresa" value="" required="">
            <div class="invalid-feedback float-left">
              Ingrese un rut válido por favor </div>
          </div>
          <div class="form-group">
            <label for="inputNombreRazon" class="float-left">Nombre / Razon Social</label>
            <input type="text" class="form-control is-invalid" id="inputNombreRazon" name="razonSocial" placeholder="Nombre o Razon Social" value="" required="">
            <div class="invalid-feedback float-left">
              Ingrese Nombre o Razón Social </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputRutRepresentante" class="float-left">Rut Representante</label>
                <input type="text" class="form-control is-invalid" id="inputRutRepresentante" name="rutRep" placeholder="Rut Representante" value="" required="">
                <!--div erroneo-->
              <div class="invalid-feedback float-left">
                Ingrese un rut válido por favor </div>
            </div> <!--div trasladado-->
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputRepresentante" class="float-left">Nombre Representante</label>
                <input type="text" class="form-control is-invalid" id="inputRepresentante" name="nomRep" placeholder="Nombre Representante" value="" required="">
              <!--div erroneo-->
              <div class="invalid-feedback float-left">
                Ingrese Nombre de Representante </div>
            </div> <!--div trasladado-->
            </div>
          </div>
          <div class="form-group">
            <label for="inputDistribuidor" class="float-left">Distribuidor</label>
            <select name="distribuidor" class="custom-select is-invalid" required="">
              <option value="">Seleccione Distribuidor...</option>
              <option value="1">ONE</option>
              <option value="2">Gerson</option>
              <option value="3">NGR</option>
              <option value="4">Otro</option>
            </select>
            <div class="invalid-feedback float-left">
              Seleccione un Distribuidor </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputSucursal" class="float-left">Sucursal</label>
                <input type="number" class="form-control is-invalid" id="inputSucursal" name="sucursal" required="">
              <!--div erroneo-->
              <div class="invalid-feedback float-left">
                Seleccione un Sucursal </div>
            </div> <!--div trasladado-->
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputEquipo" class="float-left">Equipo</label>
                <input type="number" class="form-control" id="inputEquipo" value="1" required="">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="inputCaja" class="float-left">ID Caja</label>
                <input type="text" class="form-control" id="inputCaja" value="1" required="">
              </div>
            </div>
            <div class="col">
              <div class="form-group">
                <label for="inputServidor" class="float-left">Servidor</label>
                <input type="text" class="form-control" id="inputServidor" value="1" required="">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputProduccion" class="float-left">Fecha Produccion</label>
            <input type="text" readonly="" autocomplete="off" class="form-control is-invalid hasDatepicker" id="inputProduccion" name="fechaProduccion" required="">
            <div class="invalid-feedback float-left">
              Seleccione una fecha </div>
          </div>
          <button type="submit" class="btn btn-primary">Ingresar</button>
          <input type="reset" class="btn btn-warning" value="Limpiar" onclick="$('.is-invalid').removeClass('is-invalid');">
        </form>
      </div>
    </div>
  </div>


  <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>

Te he indicado donde se encuentran mal. Un saludo.

3
  • Me puedes indicar algun div mal cerrado ?? No lo encuentro en mi codigo.
    – Excorpion
    Commented el 22 nov. 2021 a las 13:21
  • Si claro, he comentado en el código que he puesto los div erróneo y justo debajo esta puesto donde debería ir como div trasladado @Excorpion
    – Taehyung95
    Commented el 22 nov. 2021 a las 13:26
  • me puedes seguir al chat ?? chat.stackexchange.com/rooms/131663/excorpions-room
    – Excorpion
    Commented el 22 nov. 2021 a las 13:31

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.