我有一些使用<select>
的chosen plugin输入,我想在客户端验证为“必需”。由于“selected”隐藏了实际的select元素并创建了带有div和spans的小部件,因此本机HTML5验证似乎无法正常工作。表单将不会提交(这是好的),但错误消息未显示,因此用户不知道什么是错的(这不好)。
我已经转向jQuery验证插件(我计划最终使用它)但到目前为止还没有任何运气。这是我的test case:
<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()
线时,它工作正常。
如何使用jQuery验证插件验证chosen()
输入,并显示无效输入的错误消息?
jQuery validate忽略隐藏元素,并且由于Chosen插件将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("#formID").validationEngine({
prettySelect : true,
useSuffix: "_chzn"
});
你也可以试试这个:
$('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
s上添加select
类。
$('.select-chosen').valid()
强制验证隐藏的select
s
我的表单包含有条件隐藏的字段,以防止隐藏的选定字段未通过验证我已扩展默认忽略:隐藏了一点:
$.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')
。
谢谢这个答案qazxsw poi我解决了这个问题:
在文件里面Chosen.jquery.js,改变
https://stackoverflow.com/a/40310699/4700162
有了这个:
this.form_field_jq.hide().after(this.container);
你可以对“选择”的插件使用jQuery验证。对我来说很好。
this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);
jQuery验证不会获取隐藏的元素,但您可以强制它验证单个元素。一点点黑客,但以下将工作:
$('form').on('submit', function(e) {
if(!$('[name="test2"]').valid()) {
e.preventDefault();
}
});
要仅选择“已选择”元素,您可以使用$('.chzn-done')
在我的。
我的表单有“验证”类,每个输入元素都有类'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>
和jquery验证选择的javascript代码
$(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;
});
});
您可能还会遇到在选择下拉列表之前显示错误消息的问题。我找到了解决此问题的解决方案,并将我的代码粘贴到此处与您分享
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元素。我们可以在不同的地方重新定义具有相同ID的元素来覆盖原始位置。
我花了大约一天时间研究这个并且根本没有运气!然后我看了Vtiger使用的源代码并找到了金币!即使他们使用旧版本,他们也有钥匙!你必须使用
data-validation-engine="validate[required]"
如果你不这样做,并且你已经通过类传递了类,那么select会应用于所选择的并且它认为你所选择的永远不会更新。如果你没有把这个类传递给所选择的那应该是一个问题,但如果你这样做是唯一的方法。
这是选择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"
});
这个简单的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合作。
@Anupal让我走上正确的道路但不知何故我需要一个复杂的修复
.chosen
to be consideredJavaScript的
$.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);