Chosen.js и проверка jquery

Я использую validate.jquery.js: отлично работает. Но когда я добавляю selected.js, валидация в выпадающих меню select больше не работает.

Вот JS, я использую http://pastebin.com/S9AaxdEN

И вот моя выбранная форма:

<select name="category" id="category" placeholder="" class="{validate:{required:true}}">
<option value=""><?php echo lang('category_choice'); ?></option>
<option value="vtt">VTT</option>
<option value="autre">Autre type de v&eacute;lo</option>
</select>

Не знаю, почему selected.js отключил проверку, любую идею?

Ответ 1

Вы можете исправить это, добавив класс "chzn-done", который не принимает свойство "игнорировать" на "validate.settings":

var settings = $.data($('#myform')[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';

пример

HTML:

<form method="post" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <div>
            <label>datos</label>
            <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;">
                <option></option>
                <option value="1">uno</option>
                <option value="2">dos</option>
            </select>
        </div>
        <div>
            <label for="phone">Phone</label>
            <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" />
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" class="{required:true,email:true}">
        </div>

        <div class="error"></div>
        <div>
            <input type="submit" value="enviar datos"/>
        </div>
    </fieldset>
</form>

JS:

$(function() {

    var $form = $("#form1");

    $(".chzn-select").chosen({no_results_text: "No results matched"});
    $form.validate({
        errorLabelContainer: $("#form1 div.error"),
        wrapper: 'div',
    });

    var settings = $.data($form[0], 'validator').settings;
    settings.ignore += ':not(.chzn-done)';

    $('form').each(function(i, el){

        var settings = $.data(this, 'validator').settings;
        settings.ignore += ':not(.chzn-done)';

    });

});

Ответ 2

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

errorPlacement: function(error,element) {
        if (element.is(":hidden")) {
            //console.log(element.next().parent());
            element.next().parent().append(error);
        }
        else {
            error.insertAfter(element);
        }

    }

Ответ 3

Это решит не только проблему неспособности увидеть проверку, но также применит стандартный класс "вход-валидация-ошибка" к выбранному select.js.

Есть два случая, когда это необходимо применять как при отправке формы, так и при выбранном изменении. См. Три раздела кода ниже.

Первый устанавливает проверку формы для проверки скрытых элементов.
Вторая проверяет выбранную проверку на отправке.
Третий проверяет выбранную проверку на изменение.

Устанавливает проверку формы для скрытия:

var validator = $("#FormID").data('validator');
validator.settings.ignore = ":hidden:not(select)";

Проверки в форме submit:

$('#FormID').on('submit', function () {
    var ChosenDropDowns = $('.chzn-done');
    ChosenDropDowns.each(function (index) {
        var ID = $(this).attr("id");
        if (!$(this).valid()) 
        {
            $("#" + ID + "_chzn a").addClass("input-validation-error");
        }
        else 
        {
            $("#" + ID + "_chzn a").removeClass("input-validation-error");
        }
    });
});

Проверяет выбранное изменение:

$(".chzn-select").chosen().change(function () {
    var ID = $(this).attr("id");
    if (!$(this).valid()) {
        $("#" + ID + "_chzn a").addClass("input-validation-error");
    }
    else {
        $("#" + ID + "_chzn a").removeClass("input-validation-error");
    }
});

Ответ 4

Также существует проблема проверки выбранных избранных меню после отправки формы. Если у вас есть ошибка проверки в меню, то измените меню, чтобы быть действительным, ошибка проверки не исчезнет. Форма еще может быть отправлена, но это не очевидно, учитывая, что отображается ошибка проверки.

Здесь один пример, чтобы исправить его с помощью invalidHandler и valid().

// We'll use this flag so we don't have to validate fields before
// the form has been submitted.
var validatingForm = false;

// This line before validate() is called allows
// chosen menus to be validated
$.validator.setDefaults({ ignore: ":hidden:not(select)" });

$("#yourForm").validate({
    invalidHandler: function() {
        // Now we can validate the fields onChange
        validateForm = true;
    },
        rules: {
            // Probably your validation rules here
        }
    });

//  Now set an onChange event for the chosen menu
$("yourChosenMenu").change(function(){

    // Check that we've tried to submit the form
    if(validateForm) {
        // We tried to submit the form, re-validate on change
        $("yourChosenMenu").valid();
    }
});