bootstrapValidator隐藏模态框重置表单验证

本文介绍如何在使用BootstrapValidator进行表单验证时,避免模态框关闭后验证信息残留,影响用户体验。通过监听模态框关闭事件并重置表单验证,结合正确配置excluded选项,实现模态框关闭时清除表单及验证状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

在使用bootstrapValidator时发现清除模态框里面的表单,验证依然起效,这样用户体验是相当不好的 那么如何在验证失败的情况下用户关闭模态框,就清除表单内容,并保证不会下次一打开就提示验证失败呢?

我们可以监听模态框的关闭事件,从官网找到这个表格 

 hide.bs.modal 是模态框关闭后的事件 因此可以这样做

 modal.on('hidden.bs.modal', function (e) {
        // 清空表单和验证
        // Reset a form
        document.getElementById("myForm").reset();
        $('#pwdForm').bootstrapValidator("resetForm",true);
    })

​


$('#pwdForm').bootstrapValidator("resetForm",true);//重置表单验证
这样发现还是不起效果的,你需要在validate的时候加上 excluded: [':disabled']
 

 $('#form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: [':disabled'],
        fields: {
            field: {
                validators: {
                    notEmpty: {
                        message: ''
                    },
                    
                }
            },
            field: {
                validators: {
                    notEmpty: {
                        message: ''
                    },
                    callback:{
                        message: "",
                        callback: function (value, validator, $field) {

                            if(value === ''){
                                return true;
                            }


                            if(value.length < 6){
                                return {
                                    valid: false,
                                    message: ''
                                };
                            }

                            return true;
                        }
                    }
                },
            },
        }
    });

验证一下,成功啦!congratulations!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值