我一直在尝试让函数验证在成功和错误时返回true或false，这是另一个函数正在请求的，以便在Error上显示保存确认模式，但是它没有返回任何内容或者甚至不执行一次读取返回行。验证函数似乎没有返回任何内容。 如果有人可以帮助我。
验证功能：
<script type="text/javascript">
function validate(){
$('#enableForm')
.bootstrapValidator({
feedbackIcons: {
required: 'glyphicon glyphicon-asterisk',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstname: {
selector:'#firstName',
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastname: {
selector:'#lastName',
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
birthdate: {
selector:'#birthDate',
validators: {
notEmpty: {
message: 'The birth date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY',
message: 'The value is not a valid date'
}
}
}
},
onSuccess:function () {
return true;
},
onError: function(){
return false;
}
});
}
</script>
点击功能
<script type="text/javascript">
$(function(){
$('#savePatient').click(function(event){
if (validate()){
$('#modal-1').modal('show');
event.preventDefault();
var button = this;
window.setTimeout(function(form){
$(form).submit();
$('#modal-1').modal('hide');
}, 1500, $(button).closest('form'));
}
});
});
</script>
HTML
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="assets/js/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"> </script>
<script src="assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<title>Patients Profile</title>
</head>
<body>
<div class="se-pre-con"></div>
<div id="includedContent"></div>
<section>
<div class="jumbotron">
<div class="container">
<div id="includedLogout"></div>
<h1>Patients</h1>
<p>Patient Profile</p>
</div>
</div>
</section>
<div class="container">
<form:form id="enableForm" commandName="patient" class="form-horizontal">
<legend>Add Patients</legend>
<div class="form-group">
<label class="col-sm-1 comp-xs" for="firstName">First Name</label>
<div class="col-sm-2"><form:input cssClass="form-control comp-xs" id="firstName" path="firstName" type="text"/></div>
<label class="col-sm-1 comp-xs" for="middleIni">Middle Initial</label>
<div class="col-sm-1"><form:input cssClass="form-control comp-xs" id="middleIni" path="middleIni" type="text"/></div>
<label class="col-sm-1 comp-xs" for="lastName">Last Name</label>
<div class="col-sm-2"><form:input cssClass="form-control comp-xs" id="lastName" path="lastName" type="text"/></div>
</div>
<div class="form-group">
<label class="col-sm-1 comp-xs" for="address">Address</label>
<div class="col-sm-4"><form:input cssClass="form-control comp-xs" id="address" path="address" type="text"/></div>
<label class="col-sm-2 comp-xs" for="middleIni">Apt No. | Suite No. | Unit No.</label>
<div class="col-sm-1"><form:input cssClass="form-control comp-xs" id="address2" path="address2" type="text"/></div>
</div>
<div class="form-group">
<label class="col-sm-1 comp-xs" for="city">City</label>
<div class="col-sm-2"><form:input cssClass="form-control comp-xs" id="city" path="city" type="text"/></div>
<label class="col-sm-1 comp-xs" for="state">State</label>
<div class="col-sm-1"><form:input cssClass="form-control comp-xs" id="state" path="state" type="text"/></div>
<label class="col-sm-1 comp-xs" for="zipCode">Zip Code</label>
<div class="col-sm-2"><form:input cssClass="form-control comp-xs" id="zipCode" path="zipCode" type="text"/></div>
</div>
<div class="form-group">
<label class="col-sm-1 comp-xs" for="birthDate">Birth Date</label>
<div class="col-sm-2">
<fmt:formatDate var="fmtDate" value="${patient.birthDate}" pattern="MM/dd/yyyy"/>
<form:input cssClass="form-control comp-xs" placeholder="MM/DD/YYY" id="birthDate" path="birthDate" value="${fmtDate}" type="text" class="form:input-large"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input type="submit" id="savePatient" class="btn btn-primary pull-right" value ="Save" />
</div>
</div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-saved">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1><i class="glyphicon glyphicon-thumbs-up"></i> Data Saved</h1>
</div>
</div>
</div>
</div>
</form:form>
</div>
<script>
$(function(){
$("#includedLogout").load("logout.jsp");
$("#includedContent").load("navbar.jsp");
});
</script>
/body>
</html>
更新 @Arkni将验证器放在$（document）.ready（...）里面，使用下面的代码，但是modal保持循环，显示和隐藏，表单不提交。再次感谢您的帮助。
onSuccess: function (e) {
// Stop form submission
e.preventDefault();
$('#modal-1').modal('show');
window.setTimeout(function(form) {
$(form).submit();
$('#modal-1').modal('hide');
}, 1500, $('#savePatient').closest('form'));
}
答案 0 :(得分：1)
在继续解决问题之前，你必须知道：
根据jQuery Events: Stop (Mis)Using Return False，在事件处理程序中返回false会在调用时执行三个任务：
event.preventDefault(); event.stopPropagation(); 在事件处理程序中返回true不会停止事件传播，但会停止回调执行并在调用时立即返回。
我建议您使用以下解决方案之一，而不是$('#savePatient').click(function(event){ ... });和function validate() { ... }：
＃解决方案1：使用 onSucess 处理程序
$(document).ready(function () {
$('#loginForm')
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
// ...
},
fields: {
// ...
},
onSuccess: function (e) {
// Stop form submission
e.preventDefault();
$('#modal-1').modal('show');
window.setTimeout(function(form) {
$(form).submit();
$('#modal-1').modal('hide');
}, 1500, $('#savePatient').closest('form'));
}
});
});
＃解决方案2：使用活动 success.form.bv
$(document).ready(function () {
$('#loginForm')
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
// ...
},
fields: {
// ...
}
})
// This event triggered when the form is valid
// It's the equivalent to using the `onSuccess` handler
.on('success.form.bv', function (e) {
e.preventDefault();
$('#modal-1').modal('show');
window.setTimeout(function(form) {
$(form).submit();
$('#modal-1').modal('hide');
}, 1500, $('#savePatient').closest('form'));
});
});
＃工作示例：
正如我所看到的，您正在使用Spring MVC，这就是为什么我使用渲染的HTML标记来创建演示，请参阅http://jsfiddle.net/Arkni/kxxua2f7/
＃UPDATE 2015-07-28
要解决您在comment中提到的问题，请使用 group 选项。
group选项：是CSS选择器，表示字段的父元素。默认情况下，它是.form-group
在您的情况下， firstname 和 lastname 的父级是div拥有类.col-sm-2，请参阅以下代码：
$(document).ready(function () {
$('#enableForm')
.bootstrapValidator({
feedbackIcons: {
// ...
},
fields: {
firstname: {
selector: '#firstName',
group: '.col-sm-2', // <===== USE THIS OPTION
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastname: {
selector: '#lastName',
group: '.col-sm-2', // <===== USE THIS OPTION
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
birthdate: {
// ...
}
},
onSuccess: function (e) {
// ...
}
});
});
请参阅更新的小提琴：http://jsfiddle.net/Arkni/kxxua2f7/2/