jQuery Convalida richiesta Selezionare

Sto cercando di convalidare l'elemento html select usando il plugin jQuery Validate. Ho impostato la regola "obbligatorio" su vero ma passa sempre la convalida perché l'indice zero è scelto per impostazione predefinita. Esiste un modo per definire un valore vuoto utilizzato dalla regola richiesta?

UPD. Esempio. Immagina di avere il seguente controllo html:

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

Voglio che il plugin Validation utilizzi il valore "default" come vuoto.

Puoi scrivere la tua regola!

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

Una soluzione più semplice è stata delineata qui: Convalida la casella di selezione

Rendere il valore vuoto e aggiungere l'attributo richiesto

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

la soluzione più semplice

basta impostare il valore della prima opzione su stringa vuota value=""

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

e regola di convalida jquery requiredwill work

usa la regola minima

imposta il primo valore dell'opzione su 0

'selectName':{min:1}

Hai solo bisogno di mettere validate[required] come classe di questa selezione e quindi inserire un'opzione con valore = ""

per esempio:

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

Non so come sia stato il plugin al momento della domanda (2010), ma oggi ho affrontato lo stesso problema e l'ho risolto in questo modo:

1. Assegna al tuo tag select un attributo name. Ad esempio in questo caso

   <select name="myselect">

2. Invece di lavorare con l'attributo value = "default" nell'opzione tag, disabilita l'opzione predefinita o imposta value = "" come suggerito da Andrew Coats

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

   o

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

3. Imposta la regola di convalida del plugin

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

   o

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

Obs: La soluzione di Andrew Coats funziona solo se hai solo una selezione nel tuo modulo. Se vuoi che la sua soluzione funzioni con più di una selezione, aggiungi un attributo name alla tua selezione.

Spero che sia d'aiuto! :)

Ecco l'esempio semplice e comprensibile:

   <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 $

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

il valore selezionato sarà vuoto

È semplice, è necessario ottenere il valore del campo Seleziona e non può essere "predefinito".

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

La soluzione menzionata da @JMP ha funzionato nel mio caso con una piccola modifica: io uso element.valueinvece che valuein 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!" }
    }  
});

Potrebbe essere possibile che io abbia un caso speciale qui, ma non ho rintracciato la causa. Ma la soluzione di @ JMP dovrebbe funzionare in casi regolari.

come convalidare la selezione "qualifica" che ha 3 scegliere

$(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;
        }
    });

});