提交后JSF重置表单

Question

提交后JSF重置表单

我的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>

Run Code Online (Sandbox Code Playgroud)

当我输入内容并按下重置按钮时,所有内容都会重置(清空).然而,当我只输入用户名例如并按提交时,我的错误消息正在出现(必需的消息)应该是,如果我现在按下重置按钮没有重置.一切都保持不变.

我希望我的重置按钮能够在每个状态下工作.我怎样才能做到这一点？

Answer 1

Bal*_*usC 4

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

你基本上有两个选择：

不要使用render="@form". 仅显式渲染这些消息。例如
```
<h:message id="m_username" for="username" ... />
<h:message id="m_password" for="password" ... />
...
<f:ajax ... render="m_username m_password ..." />
```
Run Code Online (Sandbox Code Playgroud)
如果你有很多这样的东西，那么将它们全部指定出来只是一项艰巨的工作。如果您使用 PrimeFaces，PrimeFaces 选择器可能会派上用场。
```
<h:message for="username" styleClass="message" />
<h:message for="password" styleClass="message" />
...
<p:ajax ... update="@(.message)" />
```
Run Code Online (Sandbox Code Playgroud)
通过 GET 按钮刷新页面。
```
<h:button value="Reset" />
```
Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年前
查看次数：	12353 次
最近记录：	8 年，9 月前