jQuery Validate Required Select

146

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.

SiberianGuy
quelle
Fügen Sie einen Codeausschnitt ein, damit wir Ihnen helfen können.
Lee

Antworten:

213

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!" }
  }  
 });
JMP
quelle
1
Sie können den ausgewählten Text anstelle des Wertes wie $.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
Um zukünftigen Lesern zu helfen: Wo SelectName steht, bedeutet dies den Wert des Namensattributs und nicht den Wert des ID-Attributs. Dies ist etwas verwirrend, da bei der Arbeit in JS normalerweise mit der ID und nicht mit dem Namen gearbeitet wird. Siehe Dokumentation hier : "Regeln (Standard: Regeln werden aus Markups gelesen (Klassen, Attribute, Daten)) Typ: Objekt Schlüssel / Wert-Paare, die benutzerdefinierte Regeln definieren. Schlüssel ist der Name eines Elements"
Dror
239

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>
Andrew Coats
quelle
11
Aber Sie müssen Ihrer Option einen leeren Wert geben - nicht immer möglich oder wünschenswert
Muleskinner
4
Dies sollte nicht die akzeptierte Antwort sein, da das Originalposter ausdrücklich die Verwendung von "Regeln" fordert. Diese Option wird dem Validierungskonstruktor zugeführt und ist im Markup nicht vorhanden. Manchmal haben Sie nicht den Luxus, das Markup zu ändern. (Und ich persönlich ziehe es einfach vor, keine Logik in das Markup zu setzen.)
Mason Houtz
3
@ MasonHoutz es ist immer noch Logik im Markup, ob die Logik Wert = "" oder Wert = "Standard"
erwartet
42

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

Basheer AL-MOMANI
quelle
30

Verwenden Sie die Min-Regel

Setzen Sie den ersten Optionswert auf 0

'selectName':{min:1}
Funky Dude
quelle
Der erste Wert ist fest (es gibt eine Backend-Logik für diesen Wert)
SiberianGuy
9

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

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! :) :)

Pedro Paulo Mendes Pereira
quelle
1
Kurz gesagt, fügen Sie requireddem <select>Tag ein disabledAttribut hinzu und fügen Sie dem ersten <option>Tag ein selectedAttribut hinzu (oder das mit dem Attribut, falls es eines gibt)
Stephen
4

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

Der ausgewählte Wert ist leer

Abhishek Kumar
quelle
2
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage in Zukunft für Leser beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen. Dies verringert die Lesbarkeit sowohl des Codes als auch der Erklärungen!
Filnor
1

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;
}
Maycow Moura
quelle
1

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.

Legenden
quelle
0

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

});
michele
quelle
3
Willkommen bei Stack Overflow! Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte kurzfristige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen.
Toby Speight