0

continuando con el formulario de ayer, estoy tratando de optimizar el espacio.
He notado que mis mensajes de errores, usan espacio innecesario, por lo que quiero moverlos.
Ahora mismo se ven del sgte modo, en donde pueden ver que al limpiar, el mensaje de error ha usado espacio extra.

<head>
  <title>Cajas Bowa</title>
  <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">
</head>

<body>
  <div class="banner">
    <div class="card">
      <div class="card-body">
        <h1>Ingreso de Datos</h1>
        <hr>
        <form method="POST" id="general" novalidate="">
          <!-- Rut de la Empresa -->
          <div class="form-group">
            <label for="inputRutEmpresa" class="">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">
              Ingrese un rut válido por favor
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <input type="reset" class="btn btn-warning" value="Limpiar" onclick="$('.is-invalid').removeClass('is-invalid');">
                
</body>

Mi idea para solventar esto, es mover el mensaje de error, a la derecha del label por ejemplo, entonces no usa espacio extra. Pero si ubico el mensaje por ese lado, este desaparece.

<head>
  <title>Cajas Bowa</title>
  <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">
</head>

<body>
  <div class="banner">
    <div class="card">
      <div class="card-body">
        <h1>Ingreso de Datos</h1>
        <hr>
        <form method="POST" id="general" novalidate="">
          <!-- Rut de la Empresa -->
          <div class="form-group">
            <label for="inputRutEmpresa" class="">Rut Empresa</label>
            <div class="invalid-feedback">
              Ingrese un rut válido por favor
            </div>
            <input type="text" class="form-control is-invalid" id="inputRutEmpresa" name="rutEmpresa" placeholder="Rut de Empresa" value="" required="">
          </div>
        </form>
      </div>
    </div>
  </div>
  <input type="reset" class="btn btn-warning" value="Limpiar" onclick="$('.is-invalid').removeClass('is-invalid');">

</body>

3
  • 3
    La condición para que se muestre el <div class="invalid-feedback"> es que tenga un hermano anterior de la clase .is-invalid. Esta clase la recibe el <input> cuando no pasa las validaciones. Por lo que al mover .invalid-feedback por encima del <input class="is-invalid"> vas a provocar que nunca se llegue a mostrar. Podrías, plantearte el moverlo con CSS hacia donde quieres, con todos los problemas que esto acarrea. Pero llegados a ese punto yo me plantería tener mi propio sistema de errores.
    – phpMyGuel
    el 23 nov. 2021 a las 14:38
  • Creé un ejemplo dándole una posición absoluta, en desktop anda bien, pero en móvil vas a tener un problema. Lo has considerado? el 23 nov. 2021 a las 22:18
  • @JheymanMejia con bootstrap o clases creadas ??
    – Excorpion
    el 24 nov. 2021 a las 12:07

1 respuesta 1

0

Mientras uses la clase de bootstrap invalid-feedback creo que no te va a permitir. Podrías intentarlo creando tu mismo con css. Aunque te dejo una propuesta mas estetica a la que tienes actualmente.

<head>
  <title>Cajas Bowa</title>
  <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">
</head>

<body>
  <div class="banner">
    <div class="card">
      <div class="card-body">
        <h1>Ingreso de Datos</h1>
        <hr>
        <form method="POST" id="general" novalidate="">
          <!-- Rut de la Empresa -->
          <div class="form-group p-b2">
            <label for="inputRutEmpresa" class="">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 " >
              Ingrese un rut válido por favor
            </div>
        </div>
        </form>
        <input type="reset" class="btn btn-warning " value="Limpiar" onclick="$('.is-invalid').removeClass('is-invalid');">

      </div>

    </div>
  </div>

</body> 

También podrías ayudarnos dándonos un poco mas de contexto de cual es tu objetivo.

1
  • El objetivo es el que mencioné, ahorrar el espacio que se crea al mostrar el error, moviendolo a la derecha del label
    – Excorpion
    el 23 nov. 2021 a las 14:39

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.