JQuery Validate Dropdown-Liste

Ich bin mit dem validation plugin von hier. Ich versuche erzwingen, dass der Benutzer wählen Sie eine option in der drop-down-Liste, also 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 die jquery Validierung Sachen:

$("#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'",
     },
    }
});

Sehe ich keine Probleme, aber selbst wenn ich wählen Sie "none" aus dem drop-down-Liste und klicken Sie auf senden, es nicht Valide ist und so nicht zeigt keine Nachrichten. Kann mir jemand sagen was ich falsch mache?

InformationsquelleAutor der Frage Richard | 2012-09-17

  1. 59

    Den Dokumentation für required() Staaten:

    Zwingen Benutzer, wählen Sie eine option aus einem select-Feld, geben Sie eine leere Optionen wie <option value="">Choose...</option>

    Durch value="none" in Ihrem <option> tag, Sie sind verhindert, dass die Validierung Anruf aus gemacht werden. Sie können auch entfernen Sie Ihre benutzerdefinierte Gültigkeitsregel, code vereinfacht. Hier ein jsFiddle zeigt es in Aktion:

    http://jsfiddle.net/Kn3v5/

    Wenn Sie können nicht ändern die value - Attribut auf eine leere Zeichenfolge ist, ich weiß nicht, was zu sagen...ich wüsste auch keinen Weg, um es zu überprüfen ansonsten.

    InformationsquelleAutor der Antwort Ethan Brown

  2. 6

    Wie wir wissen, jQuery validate plugin ungültig Wählen-Feld, wenn es leer Wert. Warum wir nicht setzen Sie den Wert auf leer, wenn erforderlich.

    Ja, können Sie überprüfen, wählen Sie Feld mit einigen vordefinierten Wert.

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

    Können wir leeren Wert für das Feld auswählen, aber in einigen Fällen können wir nicht. Für die Ex: eine Funktion, die erzeugt Dropdown-Feld für Sie und Sie haben keine Kontrolle über Sie.

    Ich hoffe es hilft, denn es hilft mir.

    InformationsquelleAutor der Antwort Nishant Kumar

  3. 3

    War dies meine Lösung:

    Fügte ich erforderlich der select-tag:

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

    InformationsquelleAutor der Antwort JoshYates1980

  4. 0
    $(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});

    InformationsquelleAutor der Antwort user

  5. 0
        <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>

    InformationsquelleAutor der Antwort Amit Joshi

  6. 0

    Einfachste Weg, um bekommen es zu tun ist durch das hinzufügen 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/>​

    InformationsquelleAutor der Antwort Dulith De Cozta

  7. -1

    Habe ich modifiziert Ihren code ein wenig. Hier ist eine funktionierende version (bei mir):

        <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>  
    <div style="color:red;" id="msg_id"></div>

<script>
    $('#everything').submit(function(e){ 
        var department = $("#msg_id");
        var msg = "Please select Department";
            if ($('#dd1').val() == "") {
                department.append(msg);
                e.preventDefault();
                return false;
            }
        });
 </script>

    InformationsquelleAutor der Antwort Thilina

Schreibe einen Kommentar