0

¿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.

introducir la descripción de la imagen aquí

1
  • Creo que pude solucionar tu problema , mira mi respuesta a ver que te parce . @Paco S
    – eborrallo
    Commented el 31 ene. 2019 a las 12:17

2 respuestas 2

1

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>

0
1

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 />

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.