我想使用 https://github.com/formvalidation/formvalidation.io v0.8.1 ( jQuery 插件来验证表单字段，专为 Bootstrap 3/4 ·基础 5/6 ·纯·语义用户界面 ·伊基特 ·其他(
这是我的 HTML 页面：
....
<!-- for the error login message box -->
<link rel="stylesheet" media="screen" href="/tdk/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/tdk/css/formvalidation.css" />
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<p>Nombre de usuario o contraseña incorrecta"</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="well">
<div class="text-center">
<h1>??login.h1.text_es_ES??</h1>
<p class="lead">??login.p.lead_es_ES??</p>
</div>
<div class="text-left">
<form id="loginForm" method="post" action="/tdk/login">
<div class="form-group">
<label for="username">??login.username.text_es_ES??</label>
<input type="text" id="username" name="username" class="form-control" />
</div>
<div class="form-group">
<label for="password">??login.password.text_es_ES??</label>
<input type="password" id="password" name="password" class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">??navbar.login.text_es_ES??</button>
</div>
<input type="hidden" name="_csrf" value="ab14a342-9157-474f-9462-f56940812b6a" /></form>
<a href="/tdk/forgotmypassword">Ha olvidado su clave de acceso ?</a>
</div>
</div>
</div>
</div>
</div>
<!-- Js zone -->
<div>
<script src="/tdk/webjars/jquery/3.2.0/jquery.min.js"></script>
<!-- <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> -->
<script type="text/javascript" src="/tdk/tdk/js/jquery.floatThead.min.js"></script>
<script src="/tdk/tdk/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<!-- <script th:src="@{/js/ui.js}" type="text/javascript"></script> -->
<!-- <script th:src="@{/webjars/jquery/3.2.0/jquery.min.js}"></script> -->
</div>
<script src="/tdk/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
<script src="tdk/js/formvalidation/tdk.js"></script>
<script src="tdk/js/formvalidation/base.js"></script>
<script src="tdk/js/formvalidation/bootstrap.js"></script>
...
and my tdk.js
/* Login page form validation */
$('#loginForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
但是在客户端没有进行验证
我认为您必须将验证器放在document.ready函数中，以便您可以初始化验证器试试这个
$( document ).ready(function() {
/* Login page form validation */
$('#loginForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});