it-swarm.com.ru

JQuery Подтвердить выпадающий список

Я использую плагин валидации из здесь . Я пытаюсь заставить пользователя выбрать опцию в раскрывающемся списке, поэтому вот мой 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'",
     },
    }
});

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

25
Richard

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

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

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

http://jsfiddle.net/Kn3v5/

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

63
Ethan Brown

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

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

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

Мы можем установить пустое значение для поля выбора, но в некоторых случаях мы не можем. Например: использование функции, которая генерирует выпадающее поле для вас, и вы не можете его контролировать.

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

6
Nishant Kumar

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

Я добавил требуется к тегу выбора:

                <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

Самый простой способ сделать это, добавив required в ваш 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