JQuery Validate Раскрывающийся список

Я использую плагин проверки от здесь. Я пытаюсь заставить пользователя выбрать опцию в выпадающем списке, вот здесь мой html для списка:

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

И вот материал проверки jquery:

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

Я не вижу никаких проблем, но даже когда я не выберу ни одного из выпадающего списка и нажмите "Отправить", он не будет проверять его и поэтому не будет показывать никаких сообщений. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Ответы

Ответ 1

В документации для required() указано:

Чтобы заставить пользователя выбрать параметр из окна выбора, укажите пустые опции, такие как <option value="">Choose...</option>

Имея value="none" в тэге <option>, вы предотвращаете выполнение валидации. Вы также можете удалить свое собственное правило проверки, упрощая свой код. Здесь jsFiddle показывает это в действии:

http://jsfiddle.net/Kn3v5/

Если вы не можете изменить атрибут value на пустую строку, я не знаю, что вам сказать... Я не мог найти способ заставить его проверить в противном случае.

Ответ 2

Как мы знаем, jQuery проверяет недействительный плагин. Выберите поле, когда оно имеет пустое значение. Почему бы нам не установить значение, когда это необходимо.

Да, вы можете проверить поле выбора с некоторым предопределенным значением .

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

Мы можем установить пустое значение для поля select, но в некоторых случаях мы не можем. Для Ex: использование функции, которая генерирует поле Dropdown для вас, и вы не контролируете ее.

Я надеюсь, что это поможет, поскольку это помогает мне.

Ответ 3

Это было мое решение:

Я добавил требуемый тег select:

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

Ответ 4

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

Ответ 5

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

Ответ 6

Я немного изменил ваш код. Здесь рабочая версия (для меня):

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