0

Estoy luchando con Bootstrap 4 y Jquery Validate para lograr que el mensaje de error se muestre ABAJO O ARRIBA del input y del textarea pero no lo logro.

En los input me aparece a la derecha el mensaje. En el textarea NO APARECE y tampoco se agrega el borde verde (.is-valid) o rojo (is-invalid). No sé tampoco porque sucede esto, ya que lo verifiqué muchas veces.

He encontrado este post de donde saqué la info para Bootstrap 4. https://stackoverflow.com/a/41680512/8818885

Dejo el form aquí, y espero que puedan darme una mano. https://codepen.io/ZeR0ByTe/pen/XevpOx

Muchas gracias!

1 respuesta 1

2

El container de tipo .input-group tiene la propiedad CSS display:flex. Existiendo esa propiedad, por defecto intentará meter todos los elementos hijos en la misma fila.

Para alterar el comportamiento por defecto, tienes que modificar la propiedad flex-wrap (por defecto su valor es nowrap) y ponerla en wrap. Además tienes que conseguir que el label tenga el ancho suficiente como para forzar una nueva fila. Yo lo dejaría así

#formulario  {
  display:flex;
}

#formulario  .input-group {
  flex-wrap:wrap;
  width:100%
}
#formulario label {
  width:100%;
  display:block;
}

Pero el otro problema, es que la manera en que tienes estructurado el HTML provoca que el textarea quede afuera del form. Yo lo dejaría en cambio como

<div class="row">
    <div class="col-md-12 col-lg-12">
        <form id="formulario">
            <div class="col-lg-4">

                <div class="input-group mb-3">
                    <span class="input-group-addon">
                        <i class="fa fa-user fa-fw"></i>
                    </span>
                    <input class="form-control nombre" type="text" name="nombre" placeholder="Nombre">
                </div>

                <div class="input-group mb-3">
                    <span class="input-group-addon">
                        <i class="fa fa-envelope-o fa-fw"></i>
                    </span>
                    <input class="form-control email" type="text" name="email" placeholder="E-mail">
                </div>

                <div class="input-group mb-3">
                    <span class="input-group-addon">
                        <i class="fa fa-mobile fa-fw"></i>
                    </span>
                    <input class="form-control celular" type="text" name="celular" placeholder="Celular" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
                </div>

                <button type="submit" class="btn btn-success align-s enviar">
                    <i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar
                </button>
                <button type="reset" class="btn btn-danger align-s">
                    <i class="fa fa-trash-o fa-lg mr-2"></i>Borrar
                </button>
            </div>

            <!-- FORM LADO DERECHO -->
            <div class="col-lg-8">
                <span class="input-group-addon">
                    <i class="fa fa-commenting fa-fw"></i>
                </span>
                <textarea class="form-control mensaje" rows="6" name="mensaje" placeholder="Escriba su mensaje..."></textarea>
            </div>
        </form>
    </div>
</div>

Lo dejé funcionando en https://codepen.io/amenadiel/pen/boXWzb

3
  • Muchas gracias amenadiel, olvidé completamente lo del flex-wrap, estuve todo el día luchandolo Una duda más que tengo, quizas puedas resolverla, crees que habrá alguna forma para que cuando marque el label del error no haga tanto padding-bottom entre los input? Nuevamente muchas gracias!
    – ZeR0ByTe
    el 26 oct. 2017 a las 9:50
  • Se le podría dar al label una altura fija, un font más chico y un line-height más chico. Pero además yo vería la forma de que ese espacio siempre exista y sólo se llene con el texto de advertencia cuando sea el caso
    – ffflabs
    el 26 oct. 2017 a las 10:42
  • Muchas gracias. Si la font la achiqué, el line height no lo probé, pero ahora lo haré tambien junto con lo de la altura, perro lo otro de que el espacio siempre existe, no se me ocurre como hacerlo. Doy por finalizada la pregunta anterior y luchare ahora con esto y sino volveré a preguntar. Gracias!
    – ZeR0ByTe
    el 26 oct. 2017 a las 10:53

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.