Подтвердить что ты не робот

Bootstrap select Plugin Not work С проверкой jQuery

Я создаю свой HTML selectbox, используя bootstrap select plugin. Теперь добавьте jQueryvalidation Плагин для validate моей формы Но форма проверки не работает с плагином выбора загрузки.

DEMO ЗДЕСЬ

HTML:

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select>
    <br/>
    <input type="submit" />
</form>

JS:

$(document).ready(function () {
$('select').selectpicker();
    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

ПРИМЕЧАНИЕ. For check this conflict, remove Line 2 from JS, jQuery Validation Worked.

EDIT: adeneo Исправить проблему с помощью метода ignore[]: FIDDLE

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

Теперь это работает, но у меня есть новая проблема: при обычной проверке после полей выбора сообщение об ошибке This field is required auto Скрыть (OR с добавлением какого-либо css, показать сообщение об успешном завершении), но теперь сообщение об ошибке отображается после исправления требуемого поля. в действии: когда мы выбираем годы, сообщение об ошибке не скрывается.

Как это исправить?

4b9b3361

ОТВЕТЫ

Ответ 1

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

$('#myform').data("validator").settings.ignore = "";

FIDDLE

или

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE

Плагин выбора Bootstrap создает новый выпадающий список из неупорядоченного списка, а исходный выбор скрыт, и его значение обновляется, когда пользователь взаимодействует с неупорядоченным списком.

Это имеет недостаток в перемещении сообщения об ошибке, поскольку исходный, теперь скрытый выбор является проверяемым элементом, а новое видимое выпадающее меню, состоящее из неупорядоченного списка, вставлено Bootstrap ниже исходного выбора в DOM, сообщение об ошибке вставляется после первоначального выбора, но перед неупорядоченным списком, поэтому оно появляется над настраиваемым выпадающим списком, а не под ним, как если бы это был исходный выбор.

Чтобы исправить это, вы можете легко перемещать сообщение об ошибке для любого элемента.

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE

Ответ 2

Если вы используете класс selectpicker для инициализации виджета для выбора начальной загрузки, я рекомендую частично решить проблему, изменив параметры игнорирования по умолчанию для проверки jquery:

$.validator.setDefaults({ ignore: ':hidden:not(.selectpicker)' });

прежде чем вы подтвердите свою форму. Это немного лучше, и вам также нужно перемещать сообщения об ошибках как adeneo. И все же он не будет иметь аналогичного поведения проверки, как это было бы в случае выбора select. Проблема возникает, когда родительский контейнер скрыт. Если вы не используете bootstrap-select, ваш выбор не будет проверять, когда контейнер скрыт, но когда вы его используете, он все еще проверяет.

Ответ 3

У меня была аналогичная проблема, поэтому здесь, как я вроде расширенный @adeneo отвечаю вместе с уроками, извлеченными из (сообщение здесь).

Примечание. Для тех, кто сталкивается с этим сообщением, прочитайте @adeneo ответ и (сообщение здесь), чтобы понять объем этого решения.

Полученный код, который очень хорошо работает для меня безупречно, выглядит следующим образом:

jQuery/javascript:

$(document).ready(function() {
    $.validator.setDefaults({
        /*OBSERVATION (1): note the options used for "ignore"*/
        ignore: ':not(select:hidden, input:visible, textarea:visible)',

        /*...other options omitted to focus on the OP...*/

        errorPlacement: function (error, element) {
            /*OBSERVATION (2): note how selection is on the class "selectpicker"*/
            if (element.hasClass('selectpicker')) {
                error.insertAfter('.bootstrap-select');
            } else {
                error.insertAfter(element);
            }
            /*Add other (if...else...) conditions depending on your
            * validation styling requirements*/
        }
    });

    $('#myform').validate({ 
        rules: {
            'year': {
                required: true
            }
        },
        messages: {
            'year': {
                required: 'Please select a year from the dropdown'
            }
        }
    });
});

HTML:

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select><br/>
    <input type="submit" />
</form>

Объяснение:

НАБЛЮДЕНИЕ (1): ignore: ':not(select:hidden, input:visible, textarea:visible)' просто означает игнорировать проверку для всех элементов, которые не являются скрытыми <select>, которые не являются видимыми <input>, а не видимыми <textarea>.

В упрощенном английском языке он просто говорит, чтобы проверить скрытый <select>, игнорировать скрытый <input> и игнорировать скрытый <textarea>, что обычно требуется во многих случаях. Я думаю, что это лучший способ настроить то, какую проверку следует игнорировать или нет.

На основе @Alvin Lee ответьте здесь, установив опции ignore в элементе формы как следует хорошо, но имеет свои оговорки;

$('#myform').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)';

Проблема: Элемент выбора начальной загрузки получил подтверждение, но отобразил сообщение по умолчанию This field is required на каждом другом элементе ввода вместо того, чтобы переопределять его со всеми настраиваемыми сообщениями проверки, которые были предварительно настроены.

Исправление: переместите параметр ignore в блок $.validator.setDefaults({...})... Voila!!

НАБЛЮДЕНИЕ (2):

Вместо того, чтобы делать if (element.attr("name") == "year") {...} как @adeneo, я решил выбрать на class='selectpicker'... затем в javascript, проверьте, был ли элемент этот класс, выполнив if (element.hasClass('selectpicker')) {...}. Это просто гарантирует, что это правило может применяться ко всем элементам выбора начальной загрузки, если они декорированы классом selectpicker.

Надеюсь, что это достаточно ясно и полезно для тех, у кого есть подобные проблемы!