it-swarm.com.de

JQuery Validate Dropdown-Liste

Ich benutze das Validierungs-Plugin von here . Ich versuche den Benutzer zu zwingen, eine Option in der Dropdown-Liste auszuwählen. Hier ist mein HTML-Code für die Liste:

Select the best option<br/>
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> <br/><br/>​

Und hier ist das Jquery-Validierungsmaterial:

$("#everything").validate({
    onsubmit: true,
    rules: {
     dd1: {
      required: {
        depends: function(element) {
            return $("#dd1").val() == "none";
        }
      }
    },
    messages: {
     dd1: {
      required: "Please select an option from the list, if none are appropriate please select 'Other'",
     },
    }
});

Ich sehe keine Probleme, aber selbst wenn ich keine aus der Dropdown-Liste auswähle und auf "Senden" klickt, wird es nicht überprüft und es werden keine Nachrichten angezeigt. Kann mir jemand sagen, was ich falsch mache?

25
Richard

In der Dokumentation für required() heißt es:

Geben Sie leere Optionen wie <option value="">Choose...</option> an, um einen Benutzer zur Auswahl einer Option aus einem Auswahlfeld zu zwingen.

Mit value="none" in Ihrem <option>-Tag verhindern Sie, dass der Validierungsaufruf jemals ausgeführt wird. Sie können auch Ihre benutzerdefinierte Validierungsregel entfernen, um Ihren Code zu vereinfachen. Hier ist ein jsFiddle, das es in Aktion zeigt:

http://jsfiddle.net/Kn3v5/

Wenn Sie das value-Attribut nicht in eine leere Zeichenfolge ändern können, weiß ich nicht, was ich Ihnen sagen soll ... Ich habe keine Möglichkeit gefunden, es ansonsten zu überprüfen.

63
Ethan Brown

Wie wir wissen, macht das jQuery validate Plugin das Select-Feld ungültig, wenn es einen leeren Wert hat. Warum setzen wir den Wert nicht auf 'leer', wenn dies erforderlich ist?.

Ja, Sie können das Auswahlfeld mit einem vordefinierten Wert bestätigen.

$("#everything").validate({
    rules: {
        select_field:{
            required: {
                depends: function(element){
                    if('none' == $('#select_field').val()){
                        //Set predefined value to blank.
                        $('#select_field').val('');
                    }
                    return true;
                }
            }
        }
    }
});

Wir können einen leeren Wert für das Auswahlfeld festlegen, in manchen Fällen jedoch nicht. Zum Beispiel: Verwenden einer Funktion, die ein Dropdown-Feld für Sie generiert, und Sie haben keine Kontrolle darüber.

Ich hoffe es hilft, da es mir hilft.

6
Nishant Kumar

Das war meine Lösung:

Ich habe required zum select-Tag hinzugefügt:

                <div class="col-lg-10">
                <select class="form-control" name="HoursEntry" id="HoursEntry" required>
                    <option value="">Select.....</option>
                    <option value="0.25">0.25</option>
                    <option value="0.5">0.50</option>
                    <option value="1">1.00</option>
                    <option value="1.25">1.25</option>
                    <option value="1.5">1.50</option>
                    <option value="2">2.00</option>
                    <option value="2.25">2.25</option>
                    <option value="2.5">2.50</option>
                    <option value="3">3.00</option>
                    <option value="3.25">3.25</option>
                    <option value="3.5">3.50</option>
                    <option value="4">4.00</option>
                    <option value="4.25">4.25</option>
                    <option value="4.5">4.50</option>
                    <option value="5">5.00</option>
                    <option value="5.25">5.25</option>
                    <option value="5.5">5.50</option>
                    <option value="6">6.00</option>
                    <option value="6.25">6.25</option>
                    <option value="6.5">6.50</option>
                    <option value="7">7.00</option>
                    <option value="7.25">7.25</option>
                    <option value="7.5">7.50</option>
                    <option value="8">8.00</option>
                </select>
3
JoshYates1980

Der einfachste Weg, dies zu erreichen, ist das Hinzufügen von required in Ihre select

Select the best option
<br/>

<select name="dd1" id="dd1" required>
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> 

<br/><br/>​
1
Dulith De Costa
$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});
0
user
    <div id="msg"></div>
<!-- put above tag on body to see selected value or error -->
<script>
    $(function(){
        $("#HoursEntry").change(function(){
            var HoursEntry = $("#HoursEntry option:selected").val();
            console.log(HoursEntry);
            if(HoursEntry == "")
            {
                $("#msg").html("Please select at least One option");
                return false;
            }
            else
            {
                $("#msg").html("selected val is  "+HoursEntry);
            }
        });
    });
</script>
0
Amit Joshi