FormValidation.io 和 bootstrap select

Question

我正在使用 Boost strap 4 和 bootstrap select jQuery 插件。

我正在尝试将 FormValidation.io 与我的表单集成。我的一切都与正常的输入字段一起工作，但无法弄清楚如何将它与 select 字段集成。

我希望它成为必填字段，并在完成 selection 后显示勾号图标。

我的FormValidation.io代码：

document.addEventListener('DOMContentLoaded', function(e) {
const mydropzone = document.getElementById('mydropzone');

const RoleIdField = jQuery(mydropzone.querySelector('[name="roleId"]'));    

const fv = FormValidation.formValidation(mydropzone, {    
       
    
        fields: {
            first_name: {
                validators: {
                    notEmpty: {
                        message: 'First Name is required'
                    },                        
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'First Name can only consist of alphabetical characters'
                    }
                }
            },
            last_name: {
                validators: {
                    notEmpty: {
                        message: 'Last Name is required'
                    },                        
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'First Name can only consist of alphabetical characters'
                    }
                }
            },
            roleId: {
                validators: {
                    notEmpty: {
                        message: 'Please select a Role'
                    },  
                }
            },
           
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap(),
            submitButton: new FormValidation.plugins.SubmitButton(),
            icon: new FormValidation.plugins.Icon({
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            }),
        }
    }
);
});


$('#roleId').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// Revalidate the color field when an option is chosen
fv.revalidateField('roelId');
});

我的表单 ID 是 'mydropzone'，我的 select 姓名和 ID 是 'roleId'

感谢任何帮助。

Answer 1

感谢回复我电子邮件的开发人员，还有其他需要知道这是如何完成的人：

将此添加到您的 css 文件中：

.bootstrap-select i.fv-plugins-icon {
right: -38px !important;

然后像这样配置你的 js :

<script>
document.addEventListener('DOMContentLoaded', function(e) {
$('#gender').selectpicker();

const demoForm = document.getElementById('demoForm');
FormValidation.formValidation(demoForm, {
    fields: {
        gender: {
            validators: {
                notEmpty: {
                    message: 'The gender is required'
                }
            }
        },
    },
    plugins: {
        trigger: new FormValidation.plugins.Trigger(),
        submitButton: new FormValidation.plugins.SubmitButton(),
        bootstrap: new FormValidation.plugins.Bootstrap(),
        icon: new FormValidation.plugins.Icon({
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
          }),
       }
    });
});
</script>

FormValidation.io 和 bootstrap select

FormValidation.io with bootstrap select

bootstrap-select

formvalidation.io