jQuery Validate Required Select


146

Estoy tratando de validar el elemento de selección html usando el complemento jQuery Validate. Establecí la regla "requerida" en verdadero pero siempre pasa la validación porque el índice cero se elige de forma predeterminada. ¿Hay alguna forma de definir el valor vacío que utiliza la regla requerida?

UPD Ejemplo. Imagine que tenemos el siguiente control html:

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

Quiero que el complemento de Validación use el valor "predeterminado" como vacío.


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

Respuestas:


213

¡Puedes escribir tu 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!" }
  }  
 });

1
Puede probar el texto seleccionado en lugar del valor, de esta manera:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
Pablo SG Pacheco

11
Para ayudar a futuros lectores: Donde se dice SelectName significa el valor del atributo de nombre y no el valor del atributo de identificación. Esto es un poco confuso ya que cuando se trabaja en JS generalmente se trabaja con la identificación y no con el nombre. Consulte la documentación aquí : "reglas (predeterminado: las reglas se leen desde el marcado (clases, atributos, datos)) Tipo: objeto Clave / pares de valores que definen reglas personalizadas. Clave es el nombre de un elemento"
Dror

239

Aquí se describe una solución más fácil: validar el cuadro de selección

Haga que el valor esté vacío y agregue 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>

11
Pero debe darle a su opción un valor vacío, no siempre posible o fácil de entender
Muleskinner

44
Esta no debería ser la respuesta aceptada porque el póster original solicita específicamente el uso de "reglas", que es una opción que se alimenta al constructor de validación y no está presente en el marcado. A veces no tienes el lujo de modificar el marcado. (Y personalmente, prefiero no poner la lógica en el marcado).
Mason Houtz

3
@MasonHoutz sigue siendo lógica en el marcado, ya sea que la lógica espere value = "" o value = "default"
billrichards


30

usar regla mínima

establecer el primer valor de opción en 0

'selectName':{min:1}

El primer valor es fijo (hay cierta lógica de backend contra este valor)
SiberianGuy

9

Solo necesita poner validate[required]como clase de esta selección y luego poner una opción con valor = ""

por ejemplo:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

7

No sé cómo fue el complemento cuando se hizo la pregunta (2010), pero hoy me enfrenté al mismo problema y lo resolví de esta manera:

  1. Dele a su etiqueta de selección un atributo de nombre. Por ejemplo en este caso

    <select name="myselect">

  2. En lugar de trabajar con el atributo value = "default" en la opción de etiqueta, desactive la opción predeterminada o establezca value = "" como sugiere Andrew Coats

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

    o

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

  3. Establecer la regla de validación del complemento

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

    o

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

Obs: la solución de Andrew Coats funciona solo si solo tiene una selección en su formulario. Si desea que su solución funcione con más de una selección, agregue un atributo de nombre a su selección.

¡Espero eso ayude! :)


1
en resumen, agregue el requiredatributo a la <select>etiqueta y agregue el disabledatributo a la primera <option>etiqueta (o la selectedque tenga el atributo si la hay)
Stephen

4

Aquí está el ejemplo simple y comprensible:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

el valor seleccionado estará en blanco


2
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código. Por favor, también trate de no saturar su código con comentarios explicativos, ¡esto reduce la legibilidad del código y las explicaciones!
Filnor

1

Es simple, necesita obtener el valor del campo Seleccionar y no puede ser "predeterminado".

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

1

La solución mencionada por @JMP funcionó en mi caso con una pequeña modificación: uso en element.valuelugar de valueen el addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

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

Podría ser posible, que tengo un caso especial aquí, pero no rastreé la causa. Pero la solución de @ JMP debería funcionar en casos regulares.


0

cómo validar la selección "qualifica" tiene 3 elegir

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

3
¡Bienvenido a Stack Overflow! Gracias por este fragmento de código, que podría proporcionar una ayuda limitada a corto plazo. Una explicación adecuada mejoraría en gran medida su valor a largo plazo al mostrar por qué esta es una buena solución al problema y lo haría más útil para futuros lectores con otras preguntas similares. Por favor, editar su respuesta a añadir un poco de explicación, incluyendo los supuestos realizados.
Toby Speight
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.