2010-05-24 28 views
123

Estoy intentando validar el elemento de selección html utilizando el complemento jQuery Validate. Establecí la regla "requerida" en verdadera, pero siempre pasa la validación porque el índice cero se elige de manera predeterminada. ¿Hay alguna forma de definir el valor vacío que usa la regla requerida?jQuery Validar obligatorio Seleccionar

UPD. Ejemplo. Imaginemos que tenemos el siguiente control html:

<select> 
    <option value="default">Choose...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

Quiero Validación plugin para utilizar el valor "default" como vacío.

+0

Ponga un fragmento de código para que podamos ayudarlo. – Lee

+0

posible duplicar: http://stackoverflow.com/questions/1271640/jquery-validate-select-box – cregox

Respuesta

182

Usted puede escribir su propia regla!

// add the rule here 
$.validator.addMethod("valueNotEquals", function(value, element, arg){ 
    return arg !== value; 
}, "Value must not equal arg."); 

// configure your validation 
$("form").validate({ 
    rules: { 
    SelectName: { valueNotEquals: "default" } 
    }, 
    messages: { 
    SelectName: { valueNotEquals: "Please select an item!" } 
    } 
}); 
+0

me ayudó a mí también, gracias –

+0

me salvó el día! Gracias. –

+1

Puede probar el texto seleccionado en lugar de valor, como este: '$ .validator.addMethod (" valueNotEquals ", function (value, element, arg) { return return arg! = JQuery (elemento) .find ('opción : selected '). text(); }, "El valor no debe ser igual a arg."; ' –

27

uso min regla

establecer primero el valor de opción a 0

'selectName':{min:1} 
+0

El primer valor es fijo (hay alguna lógica de back-end contra este valor) – SiberianGuy

+1

¡Genial! ¡SENCILLO! :-D –

+0

gran truco funky –

199

Una solución más fácil se ha esbozado aquí: Validate select box

hacer que el valor esté vacío y añadir el atributo requerido

<select id="select" class="required"> 
<option value="">Choose an option</option> 
<option value="option1">Option1</option> 
<option value="option2">Option2</option> 
<option value="option3">Option3</option> 
</select> 
+22

Esta es una gran respuesta y estoy sorprendido de que no sea la aceptada –

+4

esta debería ser una aceptada. No tienes que escribir tu propio método.DRY – nXqd

+9

Pero tiene que dar a su opción un valor vacío, no siempre posible o wishable – Muleskinner

1

Es simple, que necesita para obtener el valor Campo de selección y no puede ser "predeterminado".

if($('select').val()=='default'){ 
    alert('Please, choose an option'); 
    return false; 
} 
5

No sé cómo fue el plugin el momento en que se hizo la pregunta (2010), pero se enfrentó al mismo problema hoy en día y lo resolvió de esta manera:

  1. Da tu Seleccionar etiqueta un atributo de nombre. Por ejemplo, en este caso

    <select name="myselect">

  2. lugar de trabajar con el valor del atributo = "default" en la opción etiqueta, desactivar la opción por defecto o valor ajustado = "" según lo sugerido por Andrew Coats

    <option disabled="disabled">Choose...</option>

    o

    <option value="">Choose...</option>

  3. conjunto de reglas de validación del complemento

    $("#YOUR_FORM_ID").validate({ rules: { myselect: { required: true } } });

    o

    <select name="myselect" class="required">

Obs: solución Andrew Coats sólo funciona si usted tiene sólo un selecto en su forma. Si desea que su solución funcione con más de una, seleccione agregar un atributo de nombre a su selección.

Espero que ayude!:)

+0

Gracias por consolidar la respuesta aquí. Muy útil – Christina

+0

=== ESTA ES LA RESPUESTA MÁS CONCISA Y MINIMALISTA === – Stephen

+0

en resumen, agregue el atributo 'required' a la etiqueta'