Validar campos select con jQuery

Validar campos select con jQuery

En el tutorial anterior vimos la manera correcta de validar campos de texto con jQuery para que no puedan quedar vacíos o que posean cierta longitud. En este nuevo tutorial vamos a verificar que el usuario haya seleccionado una opción en un campo select.

Para trabajar en este tutorial vamos a estar utilizando el siguiente select para ilustrar el ejemplo:

<select name="options" id="options">
    <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 tutorial 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() {

    //Se verifica si la opcion del select esta vacia
    if ($('#options').val().trim() === '') {
        alert('Debes seleccionar una opcion');
    } else {
        alert('Campo correcto');
    }
});

De esta manera tan sencilla podemos validar se deba seleccionar una opción de manera obligatoria en los selects que utilicemos en las aplicaciones.

En el siguiente tutorial 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.

Comentarios

Deja tu comentario

http://