一段时间以来一直未能成功解决此问题。
我正在使用 JSPX，并使用图块来呈现 HTML（不是 XHTML）页面，父图块模板是这样的
<html lang="en-us" dir="ltr" xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:tiles="http://tiles.apache.org/tags-tiles" xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" omit-xml-declaration="yes"/>
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:directive.page pageEncoding="UTF-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<c:url var="rootUrl" value="/resources/" />
<link rel="stylesheet" type="text/css" href="${rootUrl}css/screen.css" />
<link href="${rootUrl}css/forms/uni-form.css" media="screen" rel="stylesheet" />
<link href="${rootUrl}css/forms/form.css" media="screen" rel="stylesheet" />
<link href="${rootUrl}css/forms/blue.uni-form.css" id="formStyle" title="Default Style" media="screen" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<!--[if lte ie 7]>
<style type="text/css" media="screen">
/* Move these to your IE6/7 specific stylesheet if possible */
.uniForm, .uniForm fieldset, .uniForm .ctrlHolder, .uniForm .formHint, .uniForm .buttonHolder, .uniForm .ctrlHolder ul{ zoom:1; }
</style>
<![endif]-->
<![CDATA[
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js">
</script>
]]>
<script type="text/javascript" src="${rootUrl}js/ext/forms/uni-form-validation.jquery.js">
<!--avoid jspx tag collapse -->
<jsp:text></jsp:text>
</script>
<![CDATA[
<script type="text/javascript">
$(function() {
$( "#demographicInfo.dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
$('form.uniForm').uniform({
prevent_submit : true,
ask_on_leave : true,
})
});
</script> ]]>
<title>Mystery Shopping</title>
</head>
<body>
<div id="page">
<tiles:insertAttribute name="header" />
<tiles:insertAttribute name="body" />
<tiles:insertAttribute name="footer" ignore="true" />
</div>
</body>
</html>
在实现 body 属性的视图中，表单已实现如下：
<div id="createPane" class="panel roundedCorners">
<form:form commandName="shopperDemographicInfo" method="POST" action="/shopper/contactinfo/save" id='contactInfo' class="uniForm">
<div class="header">
<h2>Contact Information</h2>
<p>
<a href="/shopper/info#contact_info" class="cta">Do I have to? →</a>
</p>
</div>
<fieldset>
...
...
<div class="ctrlHolder">
<label for="demographicInfo.dateOfBirth"><em>*</em> Date of birth</label>
<spring:bind path="demographicInfo.dateOfBirth">
<input name="demographicInfo.dateOfBirth" id="demographicInfo.dateOfBirth" size="35" type="text"
class="textInput auto required validateDate"
>
</spring:bind>
<p class="formHint">Date of birth in dd/mm/yyyy format</p>
</div
...
如您所见，我正在起诉基于 Jquery 的 UI 和表单生成插件。问题是块
<![CDATA[
<script type="text/javascript">
$(function() {
$( "#demographicInfo.dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
$('form.uniForm').uniform({
prevent_submit : true,
ask_on_leave : true,
})
});
</script> ]]>
不执行。也不是下面提到的形式
看到第一个回复后添加了备用块
<script type="text/javascript">
<![CDATA[
$(function() {
$( "#demographicInfo.dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
$('form.uniForm').uniform({
prevent_submit : true,
ask_on_leave : true,
})
});
]]>
</script>
详细说明 uni-form-jquery-validation 如果存在验证错误，javascript 预计不允许提交；然而这并没有发生。然而，我确实看到验证适用于其他一些预期场景，例如元素失去焦点时。同样，来自 jQuery 的日期选择器组件根本不会被渲染。
如果我放置一个简单的 HTML 5 页面，所有这些都可以正常工作。我已经正确地转义了脚本；调试器没有显示任何错误（不是我有限的 javascript 知识可以学习）。
关于可能仍然出现问题的任何指示或想法？
更新：这是一个 jQuery 加载问题，而不是其他任何事情；这是每次都会发生的事情：
- 我等到页面完全加载
- 目的将文本字段完全留空，这会在元素失去焦点时导致违规错误
此时，如果我点击刷新或返回按钮，系统会提示我确认配置要求的离开页面
'ask_on_leave：真'
但是该脚本永远不会“阻止”表单提交。
对此加载问题进一步进行故障排除以归零。
我得到的另一个相当诡异的行为是，在几次随机刷新之后，要求确认离开页面的弹出窗口开始按照配置的要求工作
ask_on_leave : true
对我来说，这似乎是一个实例化问题，但我无法再进行故障排除，因为运行 firebug 或 chrome 开发者控制台，当页面加载或添加断点以在访问页面上的控件时检查流程时，不会出现错误。
检查 JQuery 打开的缺陷，看看那里是否有一些指针。
日期选择器解决了
我对“id”属性的值使用了错误的格式
id='demographicInfo.dateOfBirth'
并在 jQuery 函数中
$( "#demographicInfo.dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
这让 jQuery 感到困惑，将其更改为
id='dateOfBirth'
和
$( "#dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
解决了
我必须添加片段来转义所有元素的名称，这些元素有一个句点，即一个元素
<input name='demographicInfo.age' .... />
javascript代码
required : function (field, caption) {
var name;
if (field.is(':radio')) {
var rawName = field.attr('name');
if(~rawName.indexOf('.')){
console.log("escaping . chanracter");
name = rawName.replace(".","\\.");
console.log(name);
}else
name = rawName;
if ($("input[name=" + name + "]:checked").length) {
return true;
}
return i18n('req_radio', caption);
}
if (field.is(':checkbox')) {
name = field.attr('name');
if (field.is(":checked")) {
return true;
}
return i18n('req_checkbox', caption);
}
if (jQuery.trim(field.val()) === '') {
return i18n('required', caption);
}
return true;
}
由于带有 . 名字中的字符。