bootstrapValidator的使用以及一些问题的解决

1、引入相关css/js文件，除了已经引入jQuery、bootstrap相关的css\js文件，还要引用bootstrapValidator相关文件，如下：

<link href="<%=basePath%>static/bootstrapStatic/css/bootstrap/bootstrapValidator.min.css" rel="stylesheet" />
<script src="<%=basePath%>static/bootstrapStatic/js/bootstrap/bootstrapValidator.min.js" type="text/javascript" ></script>

2、编辑HTML代码，我们以验证一个下拉列表和一个输入框为例子，需要注意的是，要验证的数据组件一定要放在<div class="form-group"><div>中，否则会报错，代码如下：

<form action="${prefix}/${action }" id="dataForm" method="post" class="form-info" enctype="multipart/form-data" >
    
    <!-- 隐藏的数据字段 -->
    <input type="hidden" name="id" id="id" value="${pd.id }" />
    
    <div id="zhongxin">
    
        <table>
             <tr>   
                <td><label>小区名称</label></td>
                <td>
                    <div class="form-group">
                        <select name="apartmentId" id="apartmentId" class="form-control selectpicker show-tick" data-live-search="true" size="10">
                            <option value="" selected >所有</option>
                            <c:forEach items="${apartmentVoList}" var="apartmentVo">
                                <option value="${apartmentVo.id }" <c:if test="${apartmentVo.id == pd.apartmentId }">selected="selected"</c:if> >${apartmentVo.name }</option>
                            </c:forEach>
                        </select>
                    </div>
                </td>
             </tr>
             
             <tr>   
                <td><label>门名称</label><b style="color: red;">*</b></td>
                <td>
                    <div class="form-group">
                        <input type="text" name="name" id="name" value="${pd.name }" size="20" class="form-control">
                    </div>
                </td>
             </tr>
                            
         </table>
        <br>
        <div class="form-group" style="text-align: center;">
            <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
            <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
        </div>
    </div>

    <div id="zhongxin2" class="center" style="display: none">
        <br /> <br /> <br /> <br /> <img src="<%=basePath%>static/bootstrapStatic/images/jiazai.gif" /><br />
        <h4 class="lighter block green"></h4>
    </div>
</form>

3、编写表单验证的js代码，这里要特别注意，一定要有 excluded : [':disabled'], 这行，不然下拉列表得验证将会无效。

<script type="text/javascript">
    //输入表单验证
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)']
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                apartmentId: {
                    validators: {
                        notEmpty: {
                            message: '请选择一个项目'
                        }
                    } 
                },
                name: {
                    message: '名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '名称不能为空'
                        }
                    }
                }
            }
        });
    });
</script>

4、编写表单验证触发以及表单数据提交的js代码，由于这里不是用submit标签直接提交，而是点击保存按钮时候触发save()方法执行提交操作，因此需要在save()方法中手动执行表单验证并且判断验证结果，具体看下面的代码；
还有不能用jquery的方式执行提交，就是$('#dataForm').submit()这个方法在引入bootstrapValidator后会无法执行，因此需要使用原生js通过id获取表单元素如何执行submit()方法，见下面的代码。

<script type="text/javascript">
    //保存
    function save() {
        
        /*手动验证表单，当是普通按钮时。*/
        $('form').data('bootstrapValidator').validate();
        if(!$('form').data('bootstrapValidator').isValid()){
            return ;
        }
        
        document.getElementById("dataForm").submit();
        $("#zhongxin").hide();
        $("#zhongxin2").show();
    }
</script>

5、最后看一下效果截图，当未选中小区以及未输入门名称时候就点击按钮，结果如下：

image.png