have been unsuccessfully debugging around with this issue for a while now.
I am using JSPX, and tiles to render HTML (not XHTML) pages , the parent tiles template is like so
<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>
in the view that implements the body attribute the form has been implemented as follows:
<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
...
As you may see I am suing Jquery based plugins for UI and form generation. the problem is that the block
<![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> ]]>
does not execute. nor in the form as mentioned below
added alternate block after seeing first reply
<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>
To elaborate the uni-form-jquery-validation javascript is expected to not allow submission if there are validation errors; however that does not happen. I do however see the validation working on some of the other expected scenario like when an element looses focus. Similarly the date-picker component from jQuery does not get rendered at all.
All of this ow ever works if I put a simple HTML 5 page. I have escaped the scripts properly; the debugger does not show any errors (not that my limited javascript knowledge can pick up).
Any pointers or ideas on what might still be going wrong?
here's the link to uni-form jquery plugin and the github source
Update: it is a jQuery loading issue more than any thing else; here's what happens every time:
- I wait till page has loaded completely
- purpose fully leave text fields blank which causes violation errors when the elements loose focus
at this point if I hit refresh or back button I am prompted for a confirmation about leaving page as mandated by the configuration
'ask_on_leave : true'
however the script does not 'block' form submission ever.
troubleshooting further to zero down on this loading issue.
The other rather spooky behavior that I get is that after a couple of random refreshes, the pop-up asking for confirmation of leaving the page starts working as mandated by the configuration
ask_on_leave : true
to me it appears an instantiate issue, but I am not able to troubleshoot anymore since running the firebug or chrome developer console there are not errors are such when the page loads or when I add breakpoints to check the flow when accessing controls on the page.
Checking JQuery open defects to see if there is some pointers over there.
Datepicker solved
I was using the wrong format for value of the "id" attribute it was
id='demographicInfo.dateOfBirth'
and in the jQuery function
$( "#demographicInfo.dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
which was confusing jQuery, changed it to
id='dateOfBirth'
and
$( "#dateOfBirth" ).datepicker({
minDate: -20, maxDate: "+1M +10D",
changeMonth: true,
changeYear: true });
Solved
I had to add snippet for escaping the names of all elements which had a period i.e. for an element
<input name='demographicInfo.age' .... />
the javascript code
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;
}
The form submit behavior was not working because of JQuery exceptions with the . character in name.
