number - jQuery Validate Seleccionar requerido

jquery validate rules messages

Question

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?

UPD. Ejemplo. Imagina 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 Validación use el valor "predeterminado" como vacío.

Answer 1

la solución más simple

simplemente configure el valor de la primera opción para vaciar value="" cadena value=""

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

y la regla required validación jquery will work

Answer 2

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

Answer 3

Aquí se ha resumido una solución más fácil: Validar 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>

Answer 4

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;
}

Answer 5

La solución mencionada por @JMP funcionó en mi caso con una pequeña modificación: uso element.value lugar de value en 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 normales.

Answer 6

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

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

   <select name="myselect">

2. En lugar de trabajar con el valor de atributo = "predeterminado" en la opción de etiqueta, deshabilite la opción predeterminada o establezca el valor = "" como lo 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 tiene una sola selección en su formulario. Si desea que su solución funcione con más de una, seleccione agregar un atributo de nombre a su selección.

¡Espero eso ayude! :)

Answer 7

Solo necesita poner validate[required] como clase de este select y luego poner una opción con value = ""

por ejemplo:

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

Answer 8

cómo validar el seleccionar "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;
    }
});

});

Answer 9

usar regla mínima

establecer el primer valor de opción en 0

''selectName'':{min:1}

Answer 10

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 $