Как использовать jquery.Validate с выпадающим списком jquery.multiselect? - PullRequest
Новая
       5

Как использовать jquery.Validate с выпадающим списком jquery.multiselect?

9 голосов
/ 16 декабря 2011

Итак, ситуация такова: попытка добавить выпадающий список с помощью плагина jquery.multiselect в форме, которая в данный момент использует плагин jquery.validate , который имеет другие поля (текстполя ввода, одиночный текстовый ввод, который имеет float диапазон значений), которые в настоящее время проверяются корректно.

Когда я пытаюсь добавить правила проверки, я просто не могу получить jquery.validate для проверки моего выпадающего списка с несколькими выборками.Вот фрагменты моего кода (все предполагают, что загружены необходимые плагины - см. Ниже используемые версии):

HTML: 

<form action="some/action" id="myForm" method="POST">
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/>
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/>
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/>
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple">
        <option value="some_val1">Some Value</option>
        <option value="some_val2">Some Other Value</option>
    </select>
    <input type="submit" value="Submit" />
</form>

Javascript: 

$(document).ready(function() {
    $('#mySelect').multiselect({
        noneSelectedText: 'Select Something (required)',
        selectedList: 3,
        classes: 'my-select'
    });

    $.validator.addMethod("needsSelection", function(value, element) {
        return $(element).multiselect("getChecked").length > 0;
    });

    $.validator.addMethod("isPercent", function(value, element) {
        return parseFloat(value) >= 0 && parseFloat(value) <= 100;
    });

    $.validator.messages.needsSelection = 'You gotta pick something.';
    $.validator.messages.isPercent = 'Must be between 0% and 100%';

    $('#myForm').validate({
        rules: {
            mySelect: "required needsSelection",
            input1: "required isPercent",
            input2: "required",
            input3: "required"
        },
        errorClass: 'invalid'
    });
});

Версии Если есть явная / известная проблема с совместимостью между версиями, тогда я могу обновить, если это решит проблему, но я протестировал, используясамые новые версии для моих целей, и это, похоже, не решило мою проблему.

jQuery : 1.4.4

jquery.validate : 1.9.0

jquery.multiselect : 1,8

И, как всегда, я могу предоставить больше информации, где это возможно / необходимо.

Ответы [ 3 ]

13 голосов
/ 19 декабря 2011

Таким образом, похоже, что правила, которые я устанавливал для мультиселекции, действительно были привязаны к выбору, поскольку исходное поле выбора имеет значение :hidden при jquery.multiselect, jquery.validate по умолчанию игнорирует любые скрытые входные данные.

Решение (которое не принадлежит мне - коллега нашел его) состоит в том, чтобы использовать настройки ignore для jquery.validate. Независимо от того, передается ли селектор с параметром ignore, он помещается в jquery .not(), поэтому решение на самом деле здесь заключается в использовании двойного отрицания: 

$('#myForm').validate({
    rules: {
        mySelect: "required needsSelection",
        input1: "required isPercent",
        input2: "required",
        input3: "required"
    },
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select
    errorClass: 'invalid'
});

Уф!

0 голосов
/ 20 февраля 2013

Другим возможным решением является явное указание элементов для проверки: 

$("form").children("input, select, textarea").valid()

Это также подтвердит скрытый выбор.

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

 $("form").find("[data-stepIndex='1']").children("input, select, textarea").valid()

Надеюсь, это кому-нибудь поможет

0 голосов
/ 17 декабря 2011

Мне кажется, что ваши две опции выбора содержат значение. 

value="some_val1"

Попробуйте добавить опцию сверху со значением ничего и выберите: 

<option selected="" value="">Please Select Something</option>
...