jQuery Validate Required Select

Ich versuche, das HTML-Auswahlelement mit dem jQuery Validate-Plugin zu validieren. Ich habe die "erforderliche" Regel auf "wahr" gesetzt, aber sie besteht immer die Validierung, da standardmäßig der Nullindex gewählt wird. Gibt es eine Möglichkeit, einen leeren Wert zu definieren, der von der erforderlichen Regel verwendet wird?

UPD. Beispiel. Stellen Sie sich vor, wir haben das folgende HTML-Steuerelement:

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

Ich möchte, dass das Validierungs-Plugin den "Standard" -Wert als leer verwendet.

Sie können Ihre eigene Regel schreiben!

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

Eine einfachere Lösung wurde hier beschrieben: Auswahlfeld validieren

Machen Sie den Wert leer und fügen Sie das erforderliche Attribut hinzu

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

die einfachste Lösung

Setzen Sie einfach den Wert der ersten Option auf leere Zeichenfolge value=""

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

und jquery requiredValidierungsregel will work

Verwenden Sie die Min-Regel

Setzen Sie den ersten Optionswert auf 0

'selectName':{min:1}

Sie müssen nur eine validate[required]Klasse dieser Auswahl eingeben und dann eine Option mit dem Wert = "" einfügen.

beispielsweise:

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

Ich weiß nicht, wie das Plugin war, als die Frage gestellt wurde (2010), aber ich hatte heute das gleiche Problem und löste es folgendermaßen:

1. Geben Sie Ihrem Select-Tag ein Namensattribut. Zum Beispiel in diesem Fall

   <select name="myselect">

2. Deaktivieren Sie die Standardoption oder setzen Sie den Wert = "", wie von Andrew Coats vorgeschlagen, anstatt mit dem Attribut value = "default" in der Tag-Option zu arbeiten

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

   oder

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

3. Legen Sie die Plugin-Validierungsregel fest

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

   oder

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

Obs: Die Lösung von Andrew Coats funktioniert nur, wenn Sie nur eine Auswahl in Ihrem Formular haben. Wenn Sie möchten, dass seine Lösung mit mehr als einer Auswahl funktioniert, fügen Sie Ihrer Auswahl ein Namensattribut hinzu.

Ich hoffe es hilft! :) :)

Hier ist das einfache und verständliche Beispiel:

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

Der ausgewählte Wert ist leer

Es ist einfach, Sie müssen den Feldwert "Auswählen" abrufen und er kann nicht "Standard" sein.

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

Die von @JMP erwähnte Lösung funktionierte in meinem Fall mit einer kleinen Modifikation: Ich verwende element.valuestatt valuein der 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!" }
    }  
});

Es könnte möglich sein, dass ich hier einen Sonderfall habe, aber die Ursache nicht aufgespürt habe. Die Lösung von @ JMP sollte jedoch in regelmäßigen Fällen funktionieren.

Wie validiere ich die Auswahl "Qualifica"? Es gibt 3 Auswahlmöglichkeiten

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

});