Как я могу использовать проверку 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 и показывают сообщение об ошибке для недействительных?

15 70

15 ответов:

jQuery validate игнорирует скрытый элемент, а так как выбранный плагин добавляет 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

добавить эту строку непосредственно перед . Это прекрасно работает для меня.

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

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

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

в шахты.

моя форма имеет класс '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'

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

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

    });
});

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

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 фактически добавила скрытый элемент HTML метки. Мы можем переопределить этот элемент с тем же идентификатором в другом месте, чтобы перезаписать исходное место.

Это простое правило CSS работает на реализации Joomla 3 выбранного

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

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

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

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

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

включить .chosen следует считать

javascript

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

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

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

спасибо Бенг

html

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

javascript

опять же, глобальная конфигурация для

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 класса на каждого select s.

$('.select-chosen').valid() заставляет проверку для скрытого selects

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

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

моя форма включает в себя условно скрытые поля, чтобы предотвратить скрытые выбранные поля, не прошедшие проверку я расширил значение по умолчанию ignore: 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 и выбрали plguin.

enter image description here

эта ошибка происходит прежде всего при использовании выбранной.

Спасибо за этот ответ https://stackoverflow.com/a/40310699/4700162 я разрешаю iussue:

внутри выбранного файла.jquery.js, изменить

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

С этого:

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