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>
div
?