[英]FormValidation with Select2 uncaught exception: query function not defined for Select2
需要一些帮助找出这个错误,所以基本上我在我的HTML中有这个
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">Category</label>
</div>
<div class="col-xs-9">
<input id="prog_categ" name="category" class="form-control" required='required' placeholder="-Select Category-">
</div>
</div>
我的FormValidation JS代码基本上是遵循http://formvalidation.io/examples/select2/中的示例:
$('#newProgram')
// IMPORTANT: You must declare .on('init.field.fv')
// before calling .formValidation(options)
.on('init.field.fv', function(e, data) {
var $parent = data.element.parents('.form-group'),
$icon = $parent.find('.form-control-feedback[data-fv-icon-for="' + data.field + '"]');
$icon.on('click.clearing', function() {
// Check if the field is valid or not via the icon class
if ($icon.hasClass('glyphicon-remove')) {
// Clear the field
data.fv.resetField(data.element);
}
});
})
//Revalidate the category when it is changed
.find('[name="category"]')
.select2()
.change(function(e) {
$('#newProgram').formValidation('revalidateField', 'category');
}).end()
.formValidation({
framework : 'bootstrap',
excluded : [':disabled'],
addOns : {
i18n : {},
// mandatoryIcon: {
// icon:'fa fa-asterisk'
// },
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}
},
fields: {
category: {
validators: {
callback: {
message: 'Please choose 2-4 color you like most',
callback: function(value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('category').val();
return (options != null && options.length >= 2 && options.length <= 4);
}
}
}
},
}
})
.on('success.form.fv', function(e) {
var $form = $(e.target), // Form instance
//Get the clicked button
$button = $form.data('formValidation').getSubmitButton(),
//You might need to update the "status" field before submitting the form
$statusField = $form.find('[name="publishStatus"]');
//To demonstrate which button is clicked,
//You might don't need to use it in real application
switch ($button.attr('id')) {
case 'publishButton':
$statusField.val('publish');
alert('The article will be published');
break;
case 'draftButton':
$statusField.val('draft');
alert('The article will be saved as a draft');
break;
case 'editButton':
$statusField.val('edit');
alert('The article will be saved as a draft');
break;
default:
$statusField.val('unpublished');
alert('The article will be saved');
break;
}
});
我的Select2数据在此表单中是本地的
[{"id":"1","text":"categ1"},{"id":"2","text":"categ2"},{"id":"3","text":"categ3"},....].
现在页面可以正确加载,并且我的select2字段可以正常工作,但是验证无法正常工作。 我收到一个错误“未捕获的异常:未为Select2 prog_categ定义查询功能”,停止所有其他要验证的字段。
谁能指出我在这方面出错的地方?
谢谢
该问题与两个插件之间的不兼容性有关。 在我使用的select2版本上,Select选项是由Select2使用HTML中的输入div构建的
但是,FormValidation.io从一开始就是在DOM上寻找我具有“输入”标签的“选择”标签。 我更新到了select2的最新版本,实际上他们建议不要使用“输入”但要使用“选择”。 因此,将我的代码更改为使用最新版本的Select2,并且一切正常,没有错误。 希望可以减轻别人的头痛。
<div class="form-group">
<label class="control-label"></label>
<select id="categ" name="category" class="form-control select2" required='required' style="width: 100%"'>
<option></option>
</select>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.