Как я могу использовать проверку 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 ответов:
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.
@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
опять же, глобальная конфигурация для
вы также можете попробовать это:
$('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
Я провел около дня, работая над этим и не повезло вообще! Затем я посмотрел на исходный код, который использовал 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')
.
Спасибо за этот ответ 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);