提交后JSF重置表单 [英] JSF resetting form after submit
问题描述
我的 jsf 表单有一个小问题.我做了一个例子注册带有提交按钮和重置按钮的表单:
i have a small problem with my jsf form. i made an example registration form with a submit button and a reset button:
<?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>
当我输入内容并按下重置按钮时，一切都会重置(清空)再次.但是，当我只输入用户名并按提交我的出现错误消息(必需的消息)，因为它应该是，如果我现在按下重置按钮什么都没有重置.一切都保持不变.
When i type in something and press the reset button everything is reset (to empty) again. however when i just type in the username for example and press submit my error messages are appearing (required messages) as it should be and if i now press the reset button nothing is reset. everything stays the same.
我希望我的重置按钮在所有状态下都能正常工作.我该怎么做?
i want my reset button to work in every state. how can i do that?
推荐答案
render="@form" 时，您基本上是对整个表单的 HTML 源代码进行 ajax 更新，所有这些输入字段现在都将包含 HTML 源代码中提交的值.作为重置按钮工作正常"的证据，请在按下重置按钮之前再次尝试编辑那些提交的值.
The HTML <input type="reset"> element as generated by <h:commandButton type="reset"> does not clear the input values of the form. Instead, it resets the input values of the form to their initial values as they are in the initially obtained HTML source code. When you do a render="@form", whereby you basically ajax-update the HTML source code of the entire form, all those input fields will now contain the submitted values in the HTML source code. As evidence that the reset button "works fine", try editing those submitted values once again before pressing the reset button.
您基本上有两个选择:
不要使用
render="@form".仅显式呈现这些消息.例如
Don't use
render="@form". Render only explicitly those messages. 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 可能会派上用场.
It's only a hell lot of work to specify them all if you have many of them. If you're using PrimeFaces, PrimeFaces Selectors may come into rescue.
<h:message for="username" styleClass="message" />
<h:message for="password" styleClass="message" />
...
<p:ajax ... update="@(.message)" />
通过 GET 按钮刷新页面.
Refresh the page by a GET button.
<h:button value="Reset" />
这篇关于提交后JSF重置表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
