2009-08-13 10 views
49

Estoy usando el complemento jQuery Validation para validar un formulario. Tengo una lista de selección con este aspecto:Validar cuadro de selección

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

Ahora, yo quiero para asegurarse de que el usuario selecciona cualquier cosa menos "Elija una opción" (que es la opción por defecto). Para que no valide si eliges la primera opción. ¿Cómo puede hacerse esto?

+0

En realidad llegué a esta pregunta debido a un error de otro lugar en mi jquery ... No tuve problemas para que funcione de la manera que sugirió. Quizás jQuery haya implementado esta función desde 2009. – cregox

+0

mira mi respuesta aquí http://stackoverflow.com/a/40909817/4251431 –

Respuesta

71

Sólo añadir una clase de necesario para el selecto

<select id="select" class="required"> 
+0

Me siento tan estúpido. Nunca pensé que funcionaba en los cuadros de selección también. Gracias – ponjoh

+0

Sin preocupaciones. Buena suerte – redsquare

+17

funciona bien siempre que establezca valor en cadena vacía tjjjohnson

17

Para empezar, se puede "desactivar" la opción de ser seleccionado accidentalmente por los usuarios:

<option value="" disabled="disabled">Choose an option</option> 

Luego, dentro de su evento JavaScript (no importa si es jQuery o JavaScript), para que su formulario valide si está configurado, haga lo siguiente:

select = document.getElementById('select'); // or in jQuery use: select = this; 
if (select.value) { 
    // value is set to a valid option, so submit form 
    return true; 
} 
return false; 

O algo por el estilo.

+0

Gracias Está funcionando bien ... –

-2
<script type="text/JavaScript"> 
function validate() 
{ 
if(document.form1.quali.value == "-1") 
    { 
    alert("Please select qualification!"); 
    return false; 
    } 
} 

</script> 
<form name="form1" method="post" action="" onsubmit="return validate(this);"> 
<select name="quali" id="quali" "> 
     <option value="-1" selected="selected">select</option> 
     <option value="1">Graduate</option> 
     <option value="2">Post Graduate</option> 
     </select> 
</form> 





// this code works 110% tested by me after many complex jquery method validation but it is simple javascript method plz try this if u fail in drop down required validation// 
4

No sé cómo fue el plugin el momento en que se hizo la pregunta (2009), 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 como se sugiere por Jeremy Visser o valor ajustado = ""

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

    o

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

  3. Establecer la regla de validación complemento

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

    o

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

Obs: La solución de redsquare 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! :)

2
<select id='bookcategory' class="form-control" required=""> 
        <option value="" disabled="disabled">Category</option> 
        <option value="1">LITERATURE & FICTION</option> 
        <option value="2">NON FICTION</option> 
        <option value="3">ACADEMIC</option> 
      <option value="4">CHILDREN & TEENS</option> 

       </select> 

La validación del formulario HTML puede realizarse automáticamente por el navegador. Pruebe el código anterior:
El resto todo se hará de forma automática, sin necesidad de crear funciones js solo este menú desplegable y un botón de envío.

+0

Es posible que desee agregar el atributo seleccionado a la primera opción para que el navegador comience con esa etiqueta para que sea más visible para el usuario. –

0
if (select == "") { 
    alert("Please select a selection"); 
    return false; 

Eso debería funcionar para usted. Simplemente lo hice por mí.

0

Quizás hay una manera más corta pero esto funciona para mí.

<script language='JavaScript' type='text/javascript'> 
    function validateThisFrom(thisForm) { 
     if (thisForm.FIELDNAME.value == "") { 
      alert("Please make a selection"); 
      thisForm.FIELDNAME.focus(); 
      return false; 
     } 
     if (thisForm.FIELDNAME2.value == "") { 
      alert("Please make a selection"); 
      thisForm.FIELDNAME2.focus(); 
      return false; 
     } 
    } 
</script> 
<form onSubmit="return validateThisFrom (this);"> 
    <select name="FIELDNAME" class="form-control"> 
     <option value="">- select -</option> 
     <option value="value 1">Visible info of Value 1</option> 
     <option value="value 2">Visible info of Value 2</option> 
    </select> 
    <select name="FIELDNAME2" class="form-control"> 
     <option value="">- select -</option> 
     <option value="value 1">Visible info of Value 1</option> 
     <option value="value 2">Visible info of Value 2</option> 
    </select> 
</form> 
0

desea asegurarse de que el usuario seleccione cualquier cosa excepto "Elegir una opción" (que es la predeterminada). Para que no valide si eliges la primera opción. ¿Cómo puede hacerse esto?

Puede hacerlo agregando el atributo required = "required" en la etiqueta de selección. se puede ver en el siguiente código

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

Me funcionó bien en chorme, firefox e internet explorer. Gracias

Cuestiones relacionadas