zoukankan      html  css  js  c++  java
  • BootstrapValidator 解决多属性被同时校验问题《转》

    问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果。如图:

    这里写图片描述

    问题分析:因为bootstrapValidator默认情况是根据form-group样式验证提示,若我们代码中将同行显示属性放在一个form-group中,就会出现该问题,那么怎么解决呢 ,lz仔细阅读了该插件官网,发现存在group属性,其值默认为“.form-group”,该属性便是官方提供的在多个属性分组情况使用。
    解决方案:首先html修改代码
    <div class="form-group">
        **<div class="rowGroup">**
            <label class="col-md-2 control-label">供应商编号:</label>
            <div class="col-md-2">
            <input type="text" class="form-control" id="code" name="code"  value = "" >
        </div>
    </div>
    <div class="rowGroup">
            <label class="col-md-2 control-label">供应商名称:</label>
            <div class="col-md-2">
                <input type="text" class="form-control" id="name" name="name"  value="">
            </div>
    </div>
    <div class="rowGroup">
            <label class="col-md-2 control-label">供应商类型:</label>
            <div class="col-md-2">
            <select class="show-tick form-control" data-live-search="true" id="type" name="type">
            </select>
        </div>
        </div>
    </div>

    JS修改代码

    $('#supplierForm').bootstrapValidator({
            container: 'tooltip',
            group: '.rowGroup',
            message : '数据错误',
            excluded: ':disabled',
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            fields: {
                code: {
                    validators: {
                        notEmpty: {
                            message: '供应商编号为空'
                        },
                    },              
                }, 
                //其他属性略
            },
            submitHandler: function (validator, form, submitButton) {
                validator.defaultSubmit();
            }
        });

    结果图:
    这里写图片描述

    转自:http://blog.csdn.net/jingtianyiyi/article/details/77841365

  • 相关阅读:
    技巧 |excel 趋势线公式中的x取什么
    区别 |Python str.split()和re.split()
    案例 |思路| 年度KPI如何制定?
    区别 |时间序列vs线性回归
    数据分析师如何构建自己的 IP(网气)影响力
    RabbitMQ学习整理笔记一
    nginx学习资料整理一
    Redis 学习笔记一
    Springboot 内置tomcat 基本配置收集整理
    Spring Cloud 学习笔记一
  • 原文地址:https://www.cnblogs.com/jicheng/p/8461145.html
Copyright © 2011-2022 走看看