У мене є <select>вхідні дані за допомогою вибраного плагіна, які я хочу перевірити як "необхідні" на стороні клієнта. Оскільки "selected" приховує фактичний елемент select і створює віджет з divs та span, то, власне, перевірка 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 і показати повідомлення про помилку для недійсних?

jQuery validate ігнорує прихований елемент, і оскільки вибраний плагін додає visibility:hiddenатрибут до select, спробуйте:

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

АБО

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

Додайте цей рядок безпосередньо перед validate()функцією. Для мене це прекрасно працює.

Перевірка jQuery не збирає приховані елементи, але ви можете змусити її перевірити окремі елементи. Трохи зламати, але буде працювати наступне:

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

Щоб вибрати лише "вибрані" елементи, які ви можете використовувати $('.chzn-done')

в моєму.

моя форма має клас "перевірити", а кожен елемент введення має клас "обов'язковий" 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"});
    }
});

примітка: якщо вхідне значення є нульовим, помилка класу буде додана до батьківського 'div'

// Ви можете це виправити, використовуючи інший спосіб приховати вибраний елемент. наприклад ....

$(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;

    });
});

це просте правило CSS працює над реалізацією вибраного joomla 3

Вибраний додає недійсний клас до прихованого введення, тому використовуйте це для націлювання на вибране поле вибору

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

Мені довелося розміститися на $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
вулиці $(document).ready(function()), щоб працювати з selected.js.

https://stackoverflow.com/a/10063394/4063622

Ви також можете зіткнутися з проблемою, оскільки повідомлення про помилку відображається перед випадаючим списком Обрано. Я знайшов рішення для вирішення цієї проблеми та встав тут свій код, щоб поділитися з вами

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. Ми можемо перевизначити цей елемент з однаковим ідентифікатором в іншому місці, щоб замінити початкове місце.

Я провів близько дня, працюючи над цим, і мені зовсім не пощастило! Потім я подивився вихідний код, який використовував 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"
});

@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);

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

jQuery-Validation-Engine / demoChosenLibrary

Ви також можете спробувати це:

$('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клас до кожного selects.

$('.select-chosen').valid()змушує перевірку для прихованих selects

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

Моя форма включає умовно приховані поля, щоб запобігти невдалому вибору прихованих полів. Я продовжив ігнорування за замовчуванням: hidden трохи далі:

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

Я думаю, що це найкраще рішення.

//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').

У 2018 році я перевіряю, що jQuery validate скаржиться на поле введення без імені. Це поле введення додається jQuery Chosen plguin.

Ця помилка трапляється раніше за будь-що інше при використанні вибраного.

Дякую за цю відповідь https://stackoverflow.com/a/40310699/4700162 я вирішую проблему:

Змініть усередині файлу Chosen.jquery.js

this.form_field_jq.hide().after(this.container);

з цим:

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

Ви можете використовувати перевірку jQuery для вибраного плагіна. Чудово працює для мене.

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

Після виклику selected () використовуйте метод jquery нижче

$ ("# id"). css ("display": ""). addClass ("sr-only");

sr-only - це клас ремінця завантаження

У підсумку я вирішив це, виконавши наступне:

Це було для Обраного v1.8.7:

1. Відкрийте selected.js і в рядку 199 знайдіть це:

this.form_field_jq.hide().after(this.container),

2. Замініть це наступним:

this.form_field_jq.addClass('chosen-master').after(this.container),

3. Додайте ці атрибути CSS до цього класу:

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

Довідково: https://stackoverflow.com/a/64491538/7353382