带有引导选择的 FormValidation.io

Posted 2023-05-09

【中文标题】带有引导选择的 FormValidation.io

【英文标题】：FormValidation.io with bootstrap select

【发布时间】：2020-11-12 12:56:29

【问题描述】：

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

我正在尝试将 FormValidation.io 与我的表单集成。我已经使用普通输入字段进行了所有工作，但不知道如何将其与选择字段集成。

我希望它是必填字段，并在做出选择后显示勾号图标。

我的 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”，我的选择名称和 ID 是“roleId”

任何帮助表示赞赏。

【参考方案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>