具有 Select2 未捕获异常的 FormValidation:未为 Select2 定义查询函数
FormValidation with Select2 uncaught exception: query function not defined for Select2
需要一些帮助来解决这个错误所以基本上我在 my 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 字段工作正常,但验证不起作用。我收到一个错误 "uncaught exception: query function not defined for Select2 prog_categ" 停止验证所有其他字段。
谁能指出我哪里出错了?
谢谢
问题与两个插件之间的不兼容有关。在我使用的 select2 版本上,Select 选项是由 Select2 使用来自 HTML
的输入 div 构建的
然而 FormValidation.io 从一开始就在 DOM 上寻找 "select" 标签,我有 "input" 标签。我更新到最新版本的 select2,他们实际上建议不要使用 "input" 但 "select"。
所以将我的代码更改为最新版本的 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>
需要一些帮助来解决这个错误所以基本上我在 my 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 字段工作正常,但验证不起作用。我收到一个错误 "uncaught exception: query function not defined for Select2 prog_categ" 停止验证所有其他字段。
谁能指出我哪里出错了?
谢谢
问题与两个插件之间的不兼容有关。在我使用的 select2 版本上,Select 选项是由 Select2 使用来自 HTML
的输入 div 构建的然而 FormValidation.io 从一开始就在 DOM 上寻找 "select" 标签,我有 "input" 标签。我更新到最新版本的 select2,他们实际上建议不要使用 "input" 但 "select"。 所以将我的代码更改为最新版本的 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>