¿Cuál es la forma más sencilla para que, si no se elige un valor de un select y se envía el formulario, cambie el color del fondo del select además de mostrar el mensaje de error?
Gracias.
¿Cuál es la forma más sencilla para que, si no se elige un valor de un select y se envía el formulario, cambie el color del fondo del select además de mostrar el mensaje de error?
Gracias.
lo que necesitas es darle valor a tus option
entonces dejas la primera opcion como por defecto y le dejas el value=""
de manera que asi no tenga valor el select
por defecto y asi el require
ara su efecto .
Para poner el background a rojo solo has de añadir una classe a tu archivo css
para especificar :focus:required:invalid
Te dejo aqui un ejemplo para que puedas verlo mejor
select:focus:required:invalid {
background-color: #f9bfbe;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form class="form-horizontal" action="#" method="post">
<select class="selectpicker form-control" required>
<option value="">Selecciona una opcion</option>
<option value="q">001</option>
<option value="q">002</option>
<option value="q" >003</option>
</select>
<button type="submit" class="btn btn-success">Submit</button>
</form>
Puedes utilizar JavaScript para hacer este proceso de esta forma.
let variable;
variable = document.getElementById('tuID').value
if (variable === '') {
variable.focus();
document.getElementById('tuID').style.background = '#000' // COLOR DE FONDO QUE NESECITES
}
<input type="text" name="variable" id="variable" aria-required="true" required />