提交后的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?
推荐答案
<h:commandButton type="reset">生成的HTML <input type="reset">元素不能清除表单的输入值.而是将表单的输入值重置为初始输入的HTML源代码中的初始值.当您执行render="@form"时，通过该操作基本上可以ajax更新整个表单的HTML源代码，所有这些输入字段现在都将包含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.
您基本上有2个选择:
-
请勿使用
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选择器可能会抢救.
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屋！
