Как я могу использовать проверку jQuery с помощью "выбранного" плагина?

У меня есть несколько входов <select>, используя выбранный плагин, который я хочу проверить как "обязательный" на стороне клиента. Поскольку "выбранный" скрывает действительный элемент select и создает виджет с divs и spans, встроенная проверка HTML5, похоже, не работает должным образом. Форма не будет отправлена (что хорошо), но сообщение об ошибке не отображается, поэтому пользователь не знает, что неправильно (что не хорошо).

Я обратился к плагину проверки jQuery (который я планировал использовать в любом случае), но пока не повезло. Здесь мой тестовый пример:

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

Это пропускает select через пустое значение без проверки или отображения сообщения об ошибке. Когда я прокомментирую строку chosen(), она отлично работает.

Как я могу проверить входы chosen() с плагином проверки jQuery и показать сообщение об ошибке для недопустимых?

Ответы

Ответ 1

jQuery validate игнорирует скрытый элемент, а так как плагин Chosen добавляет атрибут visibility:hidden к выбору, попробуйте:

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

ИЛИ

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select

Добавьте эту строку непосредственно перед функцией validate(). Это отлично работает для меня.

Ответ 2

Проверка jQuery не собирает элементы, которые скрыты, но вы можете заставить его проверять отдельные элементы. Немного взлома, но будет работать следующее:

$('form').on('submit', function(e) {
    if(!$('[name="test2"]').valid()) {
        e.preventDefault();
    }
});

Чтобы выбрать только "выбранные" элементы, вы можете использовать $('.chzn-done')

Ответ 3

в моем.

моя форма имеет класс 'validate' и каждый элемент ввода имеет класс 'required' html-код:

<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
     <div class="control-group">
        <label class="control-label" for="sku">SKU</label>
        <div class="controls">
           <input id="sku" class="required span6" type="text" name="sku">
        </div>
     </div>
     <div class="control-group">
        <label for="supplier" class="control-label">Supplier</label>
        <div class="controls">
            <select name="supplier" id="supplier" class='cho span6 {required:true} '>                                           
                <option value=''>-- PILIH --</option>
                <?php
                foreach ($result as $res)
                    {
                    echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
                    }
                ?>
            </select>
         </div>
      </div>
</form>

и код javascript для выбора с помощью проверки jquery

$(document).ready(function() {
    // - validation
    if($('.validate').length > 0){
        $('.validate').validate({
            errorPlacement:function(error, element){
                    element.parents('.controls').append(error);
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('error success').addClass('error');
            },
            success: function(label) {
                label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
            },
            //validate choosen select (select with search)
            ignore: ":hidden:not(select)"
        });
    }
    // - chosen, add the text if no result matched
    if($('.cho').length > 0){
        $(".cho").chosen({no_results_text: "No results matched"});
    }
});

Примечание: если входное значение равно null, ошибка класса будет добавлена к родительскому "div"

Ответ 4

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

$(document).ready(function() {
 $.validator.addMethod(     //adding a method to validate select box//
            "chosen",
            function(value, element) {
                return (value == null ? false : (value.length == 0 ? false : true))
            },
            "please select an option"//custom message
            );

    $("form").validate({
        rules: {
            test2: {
                chosen: true
            }
        }
    });
    $("[name='test2']").css("position", "absolute").css("z-index",   "-9999").chosen().show();

    //validation.....
    $("form").submit(function()
    {
        if ($(this).valid())
        {alert("valid");
    //some code here 
        }
        return false;

    });
});

Ответ 5

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

HTML:

<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>

Javascript:

if (!$('#ddlSponsorLevel').valid()) {
       $('#ddlSponsorLevel-error').text("You must choose a sponsor level");
            return false;
}

Jquery Validation фактически добавила скрытый элемент html метки. Мы можем переопределить этот элемент с одинаковым идентификатором в другом месте, чтобы перезаписать оригинальное место.

Ответ 6

это простое правило CSS работает над реализацией joomla 3 выбранных

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

.invalid, .invalid + div.chzn-container a {
    border-color: red !important;
}

Ответ 7

@Anupal поставил меня на правильный путь, но мне как-то понадобилось сложное исправление

Включить `.chosen` для рассмотрения

Javascript

$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

Или любое другое имя, которое вы даете избранным. Это глобальная конфигурация. Рассмотрим настройку на верхнем уровне

Создать собственное правило для выбранного

Благодаря BenG

HTML

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

Javascript

Опять же, глобальная конфигурация для объекта $.validator. Можно поставить рядом с предыдущей командой

$.validator.addMethod('chosen-required', function (value, element, requiredValue) {
    return requiredValue == false || element.value != '';
}, $.validator.messages.required);

Ответ 8

Я думаю, что это лучшее решение.

//trigger validation onchange
$('select').on('change', function() {
    $(this).valid();
});

$('form').validate({
    ignore: ':hidden', //still ignore Chosen selects
    submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here            
        var $selects = $(form).find('select'),
            valid = true;
        if ($selects.length) {
            //validate selects
            $selects.each(function() {
                if (!$(this).valid()) {
                    valid = false;
                }
            });
        }
        //only submit the form if all fields have passed validation
        if (valid) {
            form.submit();
        }
    },
    invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
        var $selects = $(this).find('select');     
        if ($selects.length) {
            validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason

            //validate selects
            $selects.each(function(index){
                validator.element(this);
            })
         }
    },
    //other options...
});

Примечание. Вам также потребуется изменить обратный вызов errorPlacement, чтобы обработать сообщение об ошибке. Если ваше сообщение об ошибке находится рядом с полем, вам нужно использовать .siblings('.errorMessageClassHere') (или другие способы в зависимости от DOM) вместо .next('.errorMessageClassHere').

Ответ 9

jQuery("#formID").validationEngine({
     prettySelect : true,
     useSuffix: "_chzn"
});

jQuery-Validation-Engine/demoChosenLibrary

Ответ 10

Вы также можете попробовать следующее:

$('form').on('submit', function(event) {
    event.preventDefault();
    if($('form').valid() == true && $('.select-chosen').valid() == true){
        console.log("Valid form");
    } else {
        console.log("Invalid form");
    }
});

Не забудьте добавить класс .select-chosen для каждого select s.

$('.select-chosen').valid() принудительно выполняет проверку скрытых select s

http://jsfiddle.net/mrZF5/39/

Ответ 11

Я провел около дня, работая над этим, и мне не повезло! Затем я посмотрел на исходный код, который Vtiger использовал и нашел золото! Несмотря на то, что они использовали более старые версии, у них был ключ! вы должны использовать

data-validation-engine="validate[required]"

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

Это с выбранным 1.4.2 validationEngine 2.6.2 и jquery 2.1.4

// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
});

Ответ 12

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

$.validator.setDefaults({ 
  ignore: ":hidden:not(.chosen-select + .chosen-container:visible)"  //for all select having class .chosen-select
    })

Ответ 13

Мне пришлось разместить $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
снаружи $(document).ready(function(), чтобы работать с selected.js.

fooobar.com/info/1326/...