しばらくの間、この問題のデバッグに失敗しました。
私は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
...
ご覧のとおり、私はUIとフォーム生成のためにJqueryベースのプラグインを訴えています。問題は、ブロックが
<![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の日付ピッカーコンポーネントはまったくレンダリングされません。
単純なHTML5ページを配置すると、このすべてが機能します。スクリプトを適切にエスケープしました。デバッガーはエラーを表示しません（私の限られたJavaScriptの知識が拾うことができるわけではありません）。
まだ何がうまくいかないのかについての指針やアイデアはありますか？
ユニフォームjqueryプラグインとgithubソースへのリンクは次のとおりです
更新：これは、他の何よりもjQueryの読み込みの問題です。毎回次のようになります。
- ページが完全に読み込まれるまで待ちます
- 目的は、テキストフィールドを完全に空白のままにします。これにより、要素がフォーカスを失うと違反エラーが発生します。
この時点で、更新ボタンまたは戻るボタンを押すと、構成で義務付けられているページを離れることについての確認を求められます
'ask_on_leave：true'
ただし、スクリプトはフォームの送信を「ブロック」しません。
この読み込みの問題をゼロにするためにさらにトラブルシューティングを行います。
私が得る他のかなり不気味な振る舞いは、ランダムに数回更新した後、ページを離れることの確認を求めるポップアップが構成で義務付けられているように機能し始めることです
ask_on_leave : true
私にはそれは瞬間的な問題のように見えますが、firebugまたはchrome開発者コンソールを実行しているため、ページの読み込み時やページのコントロールにアクセスするときにフローをチェックするためのブレークポイントを追加するときなどのエラーは発生しないため、トラブルシューティングできなくなりました。
JQueryの未解決の欠陥をチェックして、そこにいくつかのポインターがあるかどうかを確認します。
Datepickerが解決しました
「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;
}
。を使用したJQuery例外が原因で、フォーム送信動作が機能していませんでした。名前の文字。