Validar campos select con jQuery

Validar campos select con jQuery
  • Eborio Linárez
  • October 16, 2013
  • 0

En este post veremos como validar campos select o listas desplegables utilizando jQuery. Este tipo de campos es de mucha utilidad en un sitio web cuando le damos la posibilidad a los usuarios de decidir entre una lista de opciones. En ocasiones necesitaremos que obligatoriamente sea seleccionada una de las opciones y es por ello que aprenderemos como validar la selección con jQuery.

Para ilustrar el ejemplo utilizaremos el siguiente select.

<select name="options" id="options" class="form-control">
    <option value="" selected="selected">Seleccione...</option>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 2</option>
</select>

Al igual que en el post anterior el campo de tener su respectivo ID para que sea más fácil su validación.

Debemos crear una opción vacía para poder realizar la validación, es por eso que en el código podemos apreciar lo siguiente:

<option value="" selected="selected">Seleccione...</option>

Luego vamos a crear la acción del clic que ejecutará la validación.

$('#validate').click(function() {

    if ($('#options').val().trim() === '') {
        alert('Debe seleccionar una opción');

    } else {
        alert('Campo correcto');
    }
});

De esta manera tan sencilla podemos validar que se seleccione una opción del select. Si viste el post anterior te darás cuenta que el código para realizar la validación es exactamente igual.

Veamos el código en funcionamiento.

See the Pen Validar campos select con jQuery by Eborio Linárez (@eborio) on CodePen.

En el siguiente post veremos como validar radiobuttons y checkboxes ya que la forma de hacerlo es muy diferente a otros tipos de campos, debido a que tales campos no permiten el ingreso de texto por parte del usuario y siempre poseen un valor por defecto.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario