Question

我的jsf表格有一个小问题。我做了一个例子注册使用提交按钮和重置按钮的表单：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core" 
  xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>Register</title>
</h:head>

<h:body>

    <ui:composition template="/templates/master.xhtml" >

        <ui:define name="content">

            <center>
                <h:outputText value="New User Registration" />
            </center>

            <h:form>

                <h:panelGrid columns="3">

                    <h:outputText value="Username:" />
                    <h:inputText id="username" value="#{registerService.userName}" required="true" requiredMessage="Please Enter Username!" />
                    <h:message for="username" style="color:red" />

                    <h:outputText value="Password:" />
                    <h:inputSecret id="password" value="#{registerService.password}" required="true" requiredMessage="Please Enter Password!" />
                    <h:message for="password" style="color:red" />  

                    <h:outputText value="Confirm Password:" />
                    <h:inputSecret id="confirmPassword" value="#{registerService.confirmPassword}" required="true" requiredMessage="Please Confirm Password!" />
                    <h:message for="confirmPassword" style="color:red" />   

                    <h:outputText value="Lastname:" />
                    <h:inputText id="lastname" value="#{registerService.lastName}" required="true" requiredMessage="Please Enter Lastname!" />
                    <h:message for="lastname" style="color:red" />

                    <h:outputText value="Firstname:" />
                    <h:inputText id="firstname" value="#{registerService.firstName}" required="true" requiredMessage="Please Enter Firstname!" />
                    <h:message for="firstname" style="color:red" />

                    <h:outputText value="Date of Birth" />
                    <h:panelGrid columns="3">

                        <h:selectOneMenu value="#{registerService.dayOfBirth}">
                            <f:selectItems value="#{registerService.days}" />
                        </h:selectOneMenu>

                        <h:selectOneMenu value="#{registerService.monthOfBirth}">
                            <f:selectItems value="#{registerService.months}" />
                        </h:selectOneMenu>

                        <h:selectOneMenu value="#{registerService.yearOfBirth}">
                            <f:selectItems value="#{registerService.years}" />
                        </h:selectOneMenu>

                    </h:panelGrid>
                    <h:outputText value="" />

                    <h:outputText value="E-Mail:" />
                    <h:inputText id="email" value="#{registerService.eMail}" required="true" requiredMessage="Please Enter E-Mail!" />
                    <h:message for="email" style="color:red" /> 

                    <h:outputText value="Confirm E-Mail:" />
                    <h:inputText id="confirmEmail" value="#{registerService.confirmEMail}" required="true" requiredMessage="Please Confirm E-Mail!" />
                    <h:message for="confirmEmail" style="color:red" />  

                    <h:outputText value="Country:" />
                    <h:inputText id="country" value="#{registerService.country}" required="true" requiredMessage="Please Enter Country!" />
                    <h:message for="country" style="color:red" />

                    <h:outputText value="Region:" />
                    <h:inputText id="region" value="#{registerService.region}" required="true" requiredMessage="Please Enter Region!" />
                    <h:message for="region" style="color:red" />

                    <h:outputText value="Town:" />
                    <h:inputText id="town" value="#{registerService.town}" required="true" requiredMessage="Please Enter Town!" />
                    <h:message for="town" style="color:red" />

                    <h:outputText value="ZIP-Code:" />
                    <h:inputText id="zipCode" value="#{registerService.zipCode}" required="true" requiredMessage="Please Enter ZIP-Code!" />
                    <h:message for="zipCode" style="color:red" />   

                </h:panelGrid>

                <h:commandButton type="submit" value="Submit" action="#{registerService.addUser}" >
                    <f:ajax execute="@form" render="@form" />
                </h:commandButton>            
                <h:commandButton type="reset" value="Reset" />

            </h:form>

        </ui:define>

    </ui:composition>

</h:body>

当我输入内容并按下重置按钮时，所有内容都会重置（清空）再次。但是，当我只输入用户名时，请按提交我的错误消息正在出现（必需的消息）应该是，如果我现在按下重置按钮没有重置。一切都保持不变。

我希望我的重置按钮能够在每个状态下工作。我怎么能这样做？

Answer 1

由<input type="reset">生成的HTML <h:commandButton type="reset">元素不会清除表单的输入值。相反，它将表单的输入值重置为初始值，就像它们在最初获得的HTML源代码中一样。当您执行render="@form"时，基本上ajax更新整个表单的HTML源代码，所有这些输入字段现在将包含HTML源代码中的提交值。作为重置按钮“工作正常”的证据，请在按下重置按钮之前再次尝试编辑这些提交的值。

你基本上有两种选择：

请勿使用render="@form"。仅显式显示这些消息。 E.g。

<h:message id="m_username" for="username" ... />
<h:message id="m_password" for="password" ... />
...
<f:ajax ... render="m_username m_password ..." />

如果你有很多这样的话，那就完全指定它们了。如果你正在使用PrimeFaces，PrimeFaces Selectors可能会被拯救。

<h:message for="username" styleClass="message" />
<h:message for="password" styleClass="message" />
...
<p:ajax ... update="@(.message)" />

通过GET按钮刷新页面。
```
<h:button value="Reset" />
```

提交后JSF重置表单

1 个答案: