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

Вы можете исправить это, добавив класс "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)';

    });

});

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

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

    }

Это решит не только проблему невозможности увидеть проверку, но также применит стандартный класс "input-validation-error" к выбору в стиле selected.js.

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

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

Настраивает проверку формы для отображения скрытых:

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

Проверки при отправке формы:

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

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

Вот один пример, чтобы исправить это с помощью 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();
    }
});