formValidation(旧的BootstrapValidator)破坏了我通过Ajax提交的表单,即使我更改代码以
formValidation (old BootstrapValidator) break my form submit through Ajax even if I change the code to achieve new API
我最近将旧的BootstrapValidator更新到新的0.6.0版本,现在称为formValidation。我也不止一次地从头到尾阅读了文档,试图找到问题所在,但到目前为止还没有成功,所以我需要一些帮助。以下是我为实现新的 API 兼容性所做的更改:
页面和订单中包含的 CSS 样式
/components/bootstrap/dist/css/bootstrap.min.css
/components/font-awesome/css/font-awesome.min.css
/components/bootstrapvalidator/dist/css/formValidation.min.css"
/components/select2/select2.css"
/components/fuelux/dist/css/fuelux.min.css"
/css/select2-bootstrap.css"
页面和订单中包含的脚本
/components/jquery/dist/jquery.min.js
/components/bootstrap/dist/js/bootstrap.min.js
/components/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js
/components/bootstrapvalidator/dist/js/formValidation.min.js
/components/bootstrapvalidator/dist/js/framework/bootstrap.min.js
/components/bootstrapvalidator/dist/js/language/es_ES.js
/components/jquery.cookie/jquery.cookie.js
/js/bootstrap-growl.min.js
/components/select2/select2.min.js
/components/select2/select2_locale_es.js
/components/moment/min/moment-with-locales.min.js
/components/fuelux/dist/js/fuelux.min.js
/components/bootstrap-filestyle/src/bootstrap-filestyle.js
/bundles/app/js/RPNI/wzInscripcionSolicitud.js
/bundles/app/js/RPNI/wzAgregarProductos.js
这就是我使用验证插件的方式:
$('#crearSolicitudUsuario')
.find('[name="solicitudUsuario[tipoRegistro]"]')
.select2()
.change(function (e) {
$('#crearSolicitudUsuario').formValidation('revalidateField', 'solicitudUsuario[tipoRegistro]');
})
.end()
.find('[name="solicitudUsuario[oficinaRegional]"]')
.change(function (e) {
$('#crearSolicitudUsuario').formValidation('revalidateField', 'solicitudUsuario[oficinaRegional]');
})
.end()
.formValidation({
framework: 'bootstrap', // this should be set by default but just for testing purposes I set here
excluded: ':disabled',
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
container: 'popover',
fields: {
'solicitudUsuario[tipoTramite]': {
validators: {
callback: {
message: 'Debe escoger una opción',
callback: function (value, validator) {
var options = validator.getFieldElements('solicitudUsuario[tipoRegistro]').val();
return (options != null && options.length >= 1);
}
}
}
},
'solicitudUsuario[oficinaRegional]': {
validators: {
callback: {
message: 'Debe escoger una opción',
callback: function (value, validator) {
var options = validator.getFieldElements('solicitudUsuario[oficinaRegional]').val();
return (options != null && options.length >= 1);
}
}
}
}
}
}).on('success.form.bv', function (e) {
e.preventDefault();
var $form = $(e.target),
bv = $form.data('formValidation');
bv.disableSubmitButtons(false);
console.log("Enter here");
$.post(Routing.generate('guardarSolicitudRPNI'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
// some code goes here
}).fail(function () {
// some code goes here
});
});
问题:
-
console.log()
未执行,即使表单有效,它也会返回到原始状态(某种页面重新加载) - 表单从不提交
我做错了什么?我在这里错过了什么吗?有什么建议吗?
没
关系,是我的错,我错过了一些导致破坏表单验证的更改,这是我所做的更改:
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
container: 'popover',
为:
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
err: {
container: 'popover'
},
就是这样,问题已解决!
相关文章:
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- JavaScript代码无法在表单上呈现部分
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 如何在为表单输入分别处理$(this)和$时编写DRY代码
- 将以下代码重置并刷新提交后的表单
- 代码点火器在访问 URL 时提交表单
- 在 Ajax Rails 表单提交后,在表单下发布额外的 Javascript 代码 ( ..等)
- 联系表单代码自定义
- 未定义的索引-表单不通过javascript将值发送到php代码
- HTML代码表单Angular2组件属性
- 带有电子邮件验证的表单的基本代码
- Javascript代码在Mozilla的同一页面上提交表单
- 单选按钮表单代码和下拉菜单代码
- 基于AJAX的联系人表单7事件跟踪新的谷歌分析代码
- 如何将我自己的验证代码添加到MooTools的lightface表单中
- 预填表单(无法控制表单代码)
- 使用Javascript实时计算的表单代码
- 如何使用ng-clip将内容添加到剪贴板表单代码中(而不是在标记中声明)
- PHP 表单代码有时同时执行两次
- 帮助连接javascript文本框到html表单代码提交