【发布时间】：2014-03-16 01:52:23
【问题描述】：
我正在尝试使用 jquery-validate 插件来验证 bootstrap-dialog 中的表单。 “必需”规则不会阻止我提交带有空文本字段的表单。但是，“数字”规则有效，这意味着验证已正确初始化。我在这里想念什么？谢谢。
这是我如何显示引导对话框以及我如何初始化验证。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Title</title>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap/3.0.3/bootstrap.min.css" />"></link>
<script src="<c:url value="/js/jquery/1.10.2/jquery-1.10.2.min.js" />"></script>
<script src="<c:url value="/js/jquery-ui/1.10.4/jquery-ui.min.js" />"></script>
<script src="<c:url value="/js/bootstrap/3.0.3/bootstrap.min.js" />"></script>
<script src="<c:url value="/js/bootstrap-dialog//bootstrap-dialog.min.js" />"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/style.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery-ui/1.10.4/jquery-ui.min.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap-dialog/bootstrap-dialog.min.css" />"></link>
<script src="<c:url value="/js/jquery-validation/1.11.1/jquery.validate.min.js" />"></script>
<script type="text/javascript">
function wireValidationEvent($form)
{
$form.validate({
errorElement: 'span',
errorClass: 'help-block',
wrapper: "div",
rules: {
name: {
required: true
}
},
messages: {
name: {
required: "Please enter the name properly."
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
}
function showModalDialog(url)
{
var get = $.get(url, '');
get.done(function(data) {
// Note that data contains just a form without any button.
// The form is dynamically injected into the body of the modal dialog. That's why wireValidationEvent() is called each time when a form is injected.
// When Save button is clicked, the form will be submitted using jquery.
BootstrapDialog.show({
title: 'Update Form',
closable: true,
autodestroy: true,
onshow: function(dialogRef){
var $body = dialogRef.getModalBody();
$body.append(data.trim());
var $formObj = $body.find('#formOfReligion');
if ($formObj)
{
// TODO bug: required validation rule doesn't work here
wireValidationEvent($formObj);
}
else
{
alert('formOfReligion is missing');
}
},
buttons: [{
label: 'Save',
action: function(dialog) {
var formObj = $('#formOfReligion');
if (formObj && formObj.length > 0)
{
var form = formObj[0];
var post = $.post(form.action, formObj.serialize());
post.done(function( data ) {
// succeeded
dialog.close();
$('#frmQuery').submit();
});
post.fail(function( data ) {
// failed
});
}
}
}, {
label: 'Cancel',
action: function(dialog) {
dialog.close();
}
}]
});
});
return true;
}
</script>
这是模态对话框的样子。
<div class="modal-backdrop fade in"></div>
<div id="bea044b7-a0cb-48df-8b57-6cbdedac9bdf" class="modal fade bootstrap-dialog type-primary size-normal in" tabindex="-1" style="display: block;" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="bootstrap-dialog-header">
<div class="bootstrap-dialog-title">Update Form</div>
<div class="bootstrap-dialog-close-button" style="display: block;">
<button class="close">×</button>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message"></div>
</div>
<form id="formOfReligion" class="form-horizontal" role="form" method="POST" action="/prs/protected/test" novalidate="novalidate">
<fieldset>
<div class="form-group">
<div>
<label class="control-label" for="name">Name</label>
</div>
<div>
<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="bootstrap-dialog-footer">
<div class="bootstrap-dialog-footer-buttons">
<button id="667d578f-490e-4d08-a8c1-1013b60c3394" class="btn btn-default">Save</button>
<button id="8b647389-edce-4f64-af8e-64521e865dcf" class="btn btn-default">Cancel</button>
</div>
</div>
【问题讨论】：
标签： jquery-validate twitter-bootstrap-3