bootstrapvalidator遇到调用正常但无法正确展示提示文字的问题

引用

bootstrapvalidator是由nghuuphuoc开发的一个基于bootstrap的插件，用于表单的验证提示，比较好用。这里是他的GitHub: bootstrapvalidator.

这里要引用的资源主要在这两个文件夹下，dist目录下主要为bootstrapvalidator的css和js文件，vendor则为前置依赖的jQuery和Bootstrap的css、js文件。
这里有个大雷！！这里有个大雷！！这里有个大雷！！
就是这里在使用bootstrapvalidtor的时候引用bootstrap的资源的时候需要把bootstrap中的css样式、fonts、js中的所有文件拷贝到路径中，其中fonts必须拷贝过来，这里虽然在页面中没有显式引用，但是不放过来那么在页面最后的验证调用时代码可以执行，但最后表单是没办法正确展示提示语句的。
这里是bootstrap文件中的三个文件夹。

	<!-- Bootstrap Core CSS -->
	<link rel="stylesheet" href="../../static/frontpage/bootstrap/css/bootstrap.css" th:href="@{/frontpage/bootstrap/css/bootstrap.css}">
	<!-- bootstrap-validator css -->
	<link rel="stylesheet" href="../../static/frontpage/dist/css/bootstrapValidator.css" th:href="@{/frontpage/dist/css/bootstrapValidator.css}" type="text/css">
	<!-- jQuery -->
	<script src="../../static/frontpage/js/jquery-2.1.1.js" th:src="@{/frontpage/js/jquery-2.1.1.js}"></script>
	<!-- Core JavaScript Files -->
	<script src="../../static/frontpage/bootstrap/js/bootstrap.min.js" th:src="@{/frontpage/bootstrap/js/bootstrap.min.js}"></script>
	<!-- bootstrap-validator js -->
	<script src="../../static/frontpage/dist/js/bootstrapValidator.js" th:src="@{/frontpage/dist/js/bootstrapValidator.js}"></script>

代码实现

<!-- login模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<form id="loginForm" class="form-horizontal">
				<div class="heading">用户登陆</div>
				<div class="form-group">
					<i class="fa fa-user"></i>
					<input required="" name="username" type="text" class="form-control" 
					placeholder="用户名" id="exampleInputUsername">
				</div>
				<p name="login[tipname]" style="color: red;"></p>
				<div class="form-group">
					<i class="fa fa-lock"></i>
					<input required="" name="password" type="password" class="form-control"
					 placeholder="密码">
				</div>
				<p name="login[tippasswd]" style="color: red;"></p>
				<div class="form-group">
					<button name="login[button]" class="btn btn-default"><i class="fa fa-arrow-right"></i>登陆</button>
					<span>没有账户？<p id="openRegModel" class="create_account" style="cursor: pointer;">注册</a></span>
				</div>
			</form>
		</div>
	</div>

//验证规则
$("#loginForm").bootstrapValidator({
	live: 'enabled',
	message: '此值无效',
	/* feedbackIcons: { 
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	}, */
	fields: {
		username: {
		    message: 'The username is not valid',
		    validators: {
		        notEmpty: {
		            message: '用户名为必选参数不能为空'
		        },
		        stringLength: {
		            min: 6,
		            max: 30,
		            message: '用户名长度必须大于6个字符小于30个字符'
		        },
		        regexp: {
		            regexp: /^[a-zA-Z0-9_\.]+$/,
		            message: '用户名只能由字母、数字、点和下划线组成'
		        },
		        /* remote: {
		            type: 'POST',
		            url: 'remote.php',
		            message: 'The username is not available'
		        }, */
		        different: {
		            field: 'password,confirmPassword',
		            message: '用户名和密码不能重复'
		        }
		    }
		},
		password: {
		    validators: {
		        notEmpty: {
		            message: '密码必须输入且不能为空'
		        },
		        identical: {
		            field: 'confirmPassword',
		            message: '密码和确认密码不一致'
		        },
		        different: {
		            field: 'username',
		            message: '密码不能和“用户名”相同'
		        }
		    }
		}
	}
})

//验证表单
$("button[name='login[button]']").click(function(e){
	// flag = true/false 
	var flag = $("#loginForm").data("bootstrapValidator").isValid();
	console.log(flag);
	
	$("#loginForm").bootstrapValidator('validate');

});