Question

我正在使用Tapestry 5.4.1，但也尝试使用5.4。我只想要一个带字段验证的启用Ajax的表单。基本上，我想要这个： http://jumpstart.doublenegative.com.au/jumpstart7/examples/ajax/form

但是，我无法在启用Ajax时显示基于字段的错误报告（没有Ajax它可以正常工作）。这意味着，我想要输入字段将获得红色边框的默认行为，并在输入的值无效的情况下在其下方打印错误消息。但我无法让它发挥作用。

所以我完全复制了这个例子。但是这个例子也没有用，所以现在我真的没有想法。在Jumpstart页面上，该示例正在运行，但显然没有使用显示的代码，因为示例在空名字上给出了错误，但示例在第一个名称为“Acme”时给出错误。我可以在我的日志中看到表单验证已完成并且错误已被识别，我还可以使用error元素设置为false的globalOnly选项打开错误消息。

但是我无法通过输入字段来显示它的错误。

这里有什么问题吗？

编辑：这里我正在使用的所有资源：

Java类：

import java.util.Date;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Past;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.TextField;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

@Import(stylesheet = "js.css")
public class FormTest {
    // Screen fields

    @Property
    @NotNull
    private String firstName;

    @Property
    @NotNull
    private String lastName;

    @Property
    @NotNull
    @Past
    private Date birthday;

    // Generally useful bits and pieces

    @Inject
    private Request request;

    @InjectComponent("ajaxForm")
    private Form form;

    @InjectComponent("firstName")
    private TextField firstNameField;

    @InjectComponent
    private Zone formZone;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void setupRender() {
        if (firstName == null && lastName == null && birthday == null) {
            firstName = "Humpty";
            lastName = "Dumpty";
            birthday = new Date(0);
        }
    }

    void onValidateFromAjaxForm() {

        // Note, this method is triggered even if server-side validation has already found error(s).

        System.out.println(firstName);
        if (firstName != null && firstName.equals("Acme")) {
            System.out.println("Fehler");
            form.recordError(firstNameField, "First Name must not be Acme.");
        }

    }

    void onSuccess() {
        if (request.isXHR()) {
            System.out.println("Success");
            ajaxResponseRenderer.addRender(formZone);
        }
    }

    void onFailure() {
        if (request.isXHR()) {
            System.out.println("Failure");
            ajaxResponseRenderer.addRender(formZone);
        }
    }

    public String getName() {
        return firstName + " " + lastName;
    }

    public Date getServerTime() {
        return new Date();
    }
}

模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>AJAX Form</h3>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    <p>This page demonstrates how Tapestry AJAX-enables a Form if you specify the zone parameter of the Form.</p>

    <div class="eg">
        <t:zone t:id="formZone" id="formZone">
            <t:form t:id="ajaxForm" class="form-horizontal" async="true">

                <t:errors globalOnly="false"/>

                <div class="form-group">
                    <t:label for="firstName" class="col-sm-2"/>
                    <div class="col-sm-4">
                        <t:textfield t:id="firstName"/>
                    </div>
                </div>
                <div class="form-group">
                    <t:label for="lastName" class="col-sm-2"/>
                    <div class="col-sm-4">
                        <t:textfield t:id="lastName"/>
                    </div>
                </div>
                <div class="form-group">
                    <t:label for="birthday" class="col-sm-2"/>
                    <div class="col-sm-4">
                        <t:datefield t:id="birthday"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <t:submit value="Accept"/>
                    </div>
                </div>

                Welcome ${name}. Your birthday is ${birthday}
            </t:form>
        </t:zone>
    </div>  

    Note that the following time field does not update because it's not in the zone:  ${serverTime}<br/><br/>

    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Form.html">Form</a>, 
    <a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/Request.html">Request</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/ajax.html">t5/core/ajax</a>, 
    <a href="http://tapestry.apache.org/5.4/coffeescript/forms.html">t5/core/forms</a>.<br/><br/> 

    <t:pagelink page="Index">Home</t:pagelink><br/><br/>

</body>
</html>

js.css：

.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}

Answer 1

我发现jumpstart描述和真实形式之间存在差异。我不知道它是否会导致问题但是如果你检查一下jumpstart示例的来源（在firefox中检查元素） form标签有一些额外的变量：

<form class="form-horizontal" data-async-trigger="true" data-validate="submit" action="/jumpstart7/examples/ajax/form.ajaxform" method="post" id="ajaxForm">

也许如果您添加data-async-trigger="true"变量，它将起作用。

Answer 2

您想要Tapestry无声验证吗？ Tapestry5.4 clientValidation你必须像这样设置你的AppModule contribApplicationDefaults方法：

configuration.add(SymbolConstants.FORM_CLIENT_LOGIC_ENABLED, true);

删除区域，如果FORM_CLIENT_LOGIC_ENABLED = true，当您单击提交btn时，您可以看到表单错误和项目URL，如下所示：http://localhost:8080/projectanme/FormTest。这意味着真的是clientValidation。如果FORM_CLIENT_LOGIC_ENABLED = false，当您单击提交btn时，您可以看到表单错误和项目URL，如下所示：http://localhost:8080/projectanme/FormTest.ajaxform这意味着不是clientValidation。

更多tapestry5.4教程，你可以在github上看到tapestry5-cms和tapestry-widgets代码

Tapestry 5.4，Ajax表单验证不显示字段错误

2 个答案: