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

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

在使用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!

目录
相关文章
|
8月前
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
538 1
|
JavaScript
jQuery取消checkbox选中状态
jQuery取消checkbox选中状态
59 0
55zTree - 配合 checkbox 的隐藏
55zTree - 配合 checkbox 的隐藏
34 0
|
JavaScript 索引
jquery 获取或设置radio单选框选中值的方法
jquery 获取或设置radio单选框选中值的方法
652 0
|
前端开发
你对layui的弹出层表单进行表单验证了解多少呢?
我们在项目中使用**layui**做前端的时候,就少不了表单**form**,但也有时候我们会使用**layui**的弹出层`layer.open`,来做一个弹出层表单,该弹出层有自己的**btn**(确定,取消按钮等等),那么如何对弹出层的表单做一个表单验证呢?
690 1
你对layui的弹出层表单进行表单验证了解多少呢?
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
141 0
element ui confirm弹窗自定义样式小知识
element ui confirm弹窗自定义样式小知识
1756 0
|
JavaScript 前端开发
【JavaScript】一个按钮控制显示隐藏(toggle)
【JavaScript】一个按钮控制显示隐藏(toggle)
127 0
【JavaScript】一个按钮控制显示隐藏(toggle)
|
JavaScript 前端开发
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
284 0
|
前端开发 JavaScript
jquery + Bootstrap : data-toggle="popover"鼠标放上去显示悬浮层 Tips
image.png jquery鼠标放上去显示悬浮层 Tips html js $(() => { var tip = $('#time_range_fa'); $(tip).
2179 0