bootstrapValidator 的隐藏域验证

心已赠人 2022-06-15 02:18 416阅读 0赞
  1. bootstrapValidator默认配置对于“隐藏域（:hidden）、禁用域（:disabled）、不可见域（:not (visible)）”是不进行验证的。

解决方法： 

  1. $("form").bootstrapValidator({
  2.     //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
  3.     excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
  4.     fields: {
  5.        ...
  6.     }
  7. });

  1. 我们对隐藏域赋值，例如我们选择商品的时候，表面上显示的商品名称，代码中我们会对商品id的隐藏域赋值

    $(“input[name=’goodsId’]”).val(data.goodsId);

bootstrapValidator这个插件不能捕获这样的“程序赋值事件”，所以这里不能达到验证的效果。

解决办法：

赋值之后触发一次“change”事件

  1. $("input[name='goodsId']").val(data.goodsId).change();

修改bootstrapValidator验证代码

  1. $("form").bootstrapValidator({
  2.     excluded:[":disabled"],
  3.     fields: {
  4.         goodsId: {
  5.             trigger:"change", //关键配置
  6.             validators: {
  7.                 notEmpty: {
  8.                     message: '请选择一个商品'
  9.                 }
  10.             }
  11.         }
  12.     }
  13. });

另外的解决办法

定义一个样式，使控件可见面积为0

  1. input.validate_hidden { position:absolute; height:0; width:0; border:0; }

给控件加上此样式，使其等同于隐藏表单的效果

  1. <input name="goodsName" type="text"/>
  2.     <input name="goodsId" class="validate_hidden">

发表评论

表情：
评论列表 （有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读