formValidation(旧的BootstrapValidator)破坏了我通过Ajax提交的表单,即使我更改代码以

formValidation (old BootstrapValidator) break my form submit through Ajax even if I change the code to achieve new API

本文关键字:表单 代码 提交 Ajax BootstrapValidator 旧的 坏了 formValidation      更新时间:2023-09-26

我最近将旧的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'
},

就是这样,问题已解决!