Question

暂时没有成功调试此问题。

我正在使用JSPX和tile来呈现HTML（而不是XHTML）页面，父tile模板就像这样

<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知识可以拿起）。

关于可能出现什么问题的任何指示或想法？

这是指向uni-form jquery plugin和github source

的链接

更新：这是一个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异常而无法正常工作。名字中的人物。

Answer 1

<script type='text/javascript'>//<![CDATA[ 
    ...
//]]>  
</script>

注意脚本标签内的CDATA不包围它们。

我访问一些页面元素后，jQuery 1.8.2插件和验证方法间歇性加载

1 个答案: