zoukankan      html  css  js  c++  java
  • 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”事件,而捕获,达到验证的效果

  • 相关阅读:
    BZOJ 2034 【2009国家集训队】 最大收益
    vijos P1780 【NOIP2012】 开车旅行
    BZOJ 2115 【WC2011】 Xor
    BZOJ 3631 【JLOI2014】 松鼠的新家
    BZOJ 4717 改装
    BZOJ 2957 楼房重建
    BZOJ 4034 【HAOI2015】 T2
    BZOJ 1834 【ZJOI2010】 network 网络扩容
    BZOJ 2440 【中山市选2011】 完全平方数
    BZOJ 2733 【HNOI2012】 永无乡
  • 原文地址:https://www.cnblogs.com/yuner-angel/p/9173170.html
Copyright © 2011-2022 走看看