bootstrapValidator对于隐藏域验证和程序赋值即时验证的问题

问题1:

如下代码:

<input type="hidden" name="productId"/>
复制代码
$("#addForm").bootstrapValidator({
    fields: {
        productId: {
            validators: {
                notEmpty: {
                    message: '请选择一个商品'
                }
            }
        }
    }
});
复制代码

这样的配置并没有在提交的时候对表单元素productId进行验证,那是因为bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不进行验证的。

解决方法:

复制代码
$("#addForm").bootstrapValidator({
    //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
    excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
    fields: {
        productId: {
            validators: {
                notEmpty: {
                    message: '请选择一个商品'
                }
            }
        }
    }
});
复制代码

问题2:

我们往往会有这样的需求,如下图:

在选择商品之后会在productName里面展示商品名称给用户看,而在productId这个隐藏域里面放一个商品的ID。

一般情况下这样的操作是由程序来完成的,

$("input[name='productId']").val(data.productId);
bootstrapValidator这个插件不能捕获这样的“程序赋值事件”,所以这里不能达到验证的效果,所以我们需要做一个小小的变通:
复制代码
$("#addForm").bootstrapValidator({
    //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
    excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
    fields: {
        productId: {
            trigger:"change", //问题2.关键配置
            validators: {
                notEmpty: {
                    message: '请选择一个商品'
                }
            }
        }
    }
});
复制代码
//赋值之后触发一次“change”事件
$("input[name='productId']").val(data.productId).change();

这样以后bootrapValidator会因为触发了“change”事件,而捕获,达到验证的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值