Ajax4jsf 和 <h:message> 一起使用时候的问题

本文介绍了在使用JSF框架时遇到的一个表单验证显示问题,即使用&lt;a4j:commandButton&gt;提交表单时,尽管设置了&lt;h:message&gt;用于显示错误信息,但这些信息并未在页面上正确展示。文章给出了一个解决方案:通过将&lt;h:message&gt;置于&lt;a4j:outputPanel&gt;中,并设置ajaxRendered属性为true,从而确保了错误信息能够被正确地显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 如果在页面中使用了<a4j:commandButton>来提交表单,并且使用<h:message for="componentid">来显示一些组件的报错信息,比如:

<h:inputSecret id="password" value="#{userBean.user.password}" size="11" required="true">
    <f:validateLength minimum="6" maximum="30" />
</h:inputSecret>

<h:message for="password" showSummary="true" showDetail="false" />

<a4j:commandButton value="#{msg['common.create']}" action="#{userBean.saveUser}"/>

    如果输入密码不够六位,应该会在页面中显示报错信息,但是实际上却没有,只是在控制台打印出来了这样的消息:

WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.

    实际上在这种情况下,只需要用<a4j:outputPanel>来和<h:message>配合使用即可解决问题,如下所示:

<a4j:outputPanel ajaxRendered="true">
    <h:message for="password" showSummary="true" showDetail="false" />
</a4j:outputPanel>

<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:lkmcc="http://java.sun.com/jsf/composite/lkmComponent" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core"> <cc:interface/> <cc:implementation> <style> .ui-panel .ui-panel-content { border: none !important; padding: 0.571em 0em !important; } .no-border { border: none !important; } .no-border td{ vertical-align: top; } .no-border .ui-panelgrid-cell { border: none !important; padding: 5px !important; } </style> <p:outputPanel> <h:panelGrid columns="2" styleClass="no-border"> <p:outputPanel style = "display: flex;flex-wrap: wrap;"> <h:panelGrid columns="1" styleClass="no-border"> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <h:form id="yourFormId" novalidate="novalidate"> <p:outputLabel value="编号:" /> <p:inputText id="create_studentNo" style="width:250px" value="#{studentBean.createBoardDm.studentNo}" readonly="#{not empty studentBean.createBoardDm.studentNo}" required="true" requiredMessage="请输入编号" /> <p:message for="create_studentNo" style="color:red;" /> <p:outputLabel value="姓名:" /> <p:inputText id="create_name" style="width:250px" value="#{studentBean.createBoardDm.name}" required="true" requiredMessage="请输入姓名" /> <p:message for="create_name" style="color:red;" /> <p:outputLabel value="年龄:" /> <p:inputText id="create_age" style="width:250px" value="#{studentBean.createBoardDm.age}" required="true" requiredMessage="请输入年龄" type="number" min="0" max="150" step="1" /> <p:message for="create_age" style="color:red;" /> </h:form> <p:outputLabel value="家庭地址:" /> <p:inputTextarea id="create_homeAddress" value="#{studentBean.createBoardDm.homeAddress}" rows="6" cols="50" /> <p:outputLabel value="入学日期:" /> <p:calendar id="create_enrollmentDate" value="#{studentBean.createBoardDm.enrollmentDate}" pattern="yyyy-MM-dd" inputStyle="width:150px"></p:calendar> <p:outputLabel value="有效状态:" /> <p:selectOneMenu id="create_validStatus" value="#{studentBean.createBoardDm.validStatus}" style="width:150px"> <f:selectItem itemLabel="有效" itemValue="Y" /> <f:selectItem itemLabel="无效" itemValue="N" /> </p:selectOneMenu> </h:panelGrid> </h:panelGrid> </p:outputPanel> </h:panelGrid> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <p:commandButton value="提交" actionListener="#{studentBean.createStudent}" update="@form:tabView:studentList:board_page" class="query" ajax="true" style="width:80px;" oncomplete="if (!args || !args.validationFailed) { PF('createStudent').hide(); }" /> <p:commandButton value="关闭" style="width:80px;" onclick="PF('createStudent').hide(); return false;" /> </h:panelGrid> </p:outputPanel> </cc:implementation> </html>帮我优化下点击提交按钮才验证必填
07-16
createDeptment.xhtml 组件 <p:outputPanel> <h:panelGrid columns="2" styleClass="no-border"> <p:outputPanel style = "display: flex;flex-wrap: wrap;"> <h:panelGrid columns="1" styleClass="no-border"> <h:panelGrid columns="12" responsive="true" styleClass="no-border"> <div class="ui-inputgroup" style="display:inline-block;"> <p:outputLabel value="部门名称" /> <p:inputText id="dept_name" style="width:180px" value="#{departmentBean.department.name}"/> </div> <div class="ui-inputgroup" style="display:inline-block;"> <p:outputLabel value="部门地址" /> <p:inputText id="dept_addr" style="width:180px" value="#{departmentBean.department.addr}"/> </div> <p:commandButton value="提交" rendered="#{departmentBean.preview}" actionListener="#{departmentBean.createDept}" class="query" ajax="true" style="width:80px;" ></p:commandButton> </h:panelGrid> </h:panelGrid> </p:outputPanel> </h:panelGrid> </p:outputPanel>,为什么提交无效? <p:commandButton value="创建" class="query" actionListener="#{departmentBean.openCreateDeptDialog}" update="@form:createDept" ajax="true" style="width:80px;"> </p:commandButton> <p:dialog header="新增部门/编辑部门" id="createDept" widgetVar="createDept" modal="true"> <fm:createDeptment/> </p:dialog> <p:dataTable id="dataTableId" widgetVar="dataTableId" value="#{departmentBean.departments}" var="dept" styleClass="data-table" paginator="true" rows="5" paginatorPosition="bottom" rowsPerPageTemplate="5,10,20" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"> <p:column headerText="ID" style="width: 10%;"> #{dept.id} </p:column> <p:column headerText="部门名称" style="width: 20%;" update="@form:createDept"> #{dept.name} </p:column> <p:column headerText="部门地址" style="width: 30%;" update="@form:createDept"> #{dept.addr} </p:column> <p:column headerText="创建时间" style="width: 20%;" update="@form:createDept"> <h:outputText value="#{dept.createTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm" /> </h:outputText> </p:column> <p:column headerText="更新时间" style="width: 20%;" update="@form:createDept"> <h:outputText value="#{dept.updateTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm" /> </h:outputText> </p:column> </p:dataTable>
07-15
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:lkmcc="http://java.sun.com/jsf/composite/lkmComponent" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core"> <cc:interface/> <cc:implementation> <style> .ui-panel .ui-panel-content { border: none !important; padding: 0.571em 0em !important; } .no-border { border: none !important; } .no-border td{ vertical-align: top; } .no-border .ui-panelgrid-cell { border: none !important; padding: 5px !important; } </style> <p:outputPanel> <h:panelGrid columns="2" styleClass="no-border"> <p:outputPanel style = "display: flex;flex-wrap: wrap;"> <h:panelGrid columns="1" styleClass="no-border"> <h:panelGrid columns="3" responsive="true" styleClass="no-border"> <p:outputLabel value="编号:" /> <p:inputText id="create_studentNo" style="width:250px" value="#{studentBean.createBoardDm.studentNo}" readonly="#{not empty studentBean.createBoardDm.studentNo}" required="true" requiredMessage="请输入编号" /> <p:message for="create_studentNo" style="color:red;" /> <p:outputLabel value="姓名:" /> <p:inputText id="create_name" style="width:250px" value="#{studentBean.createBoardDm.name}" required="true" requiredMessage="请输入姓名" /> <p:message for="create_name" style="color:red;" /> <p:outputLabel value="年龄:" /> <p:inputText id="create_age" style="width:250px" value="#{studentBean.createBoardDm.age}" required="true" requiredMessage="请输入年龄" type="number" min="0" max="150" step="1" /> <p:message for="create_age" style="color:red;" /> </h:panelGrid> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <p:outputLabel value="家庭地址:" /> <p:inputTextarea id="create_homeAddress" value="#{studentBean.createBoardDm.homeAddress}" rows="6" cols="50" /> <p:outputLabel value="入学日期:" /> <p:calendar id="create_enrollmentDate" value="#{studentBean.createBoardDm.enrollmentDate}" pattern="yyyy-MM-dd" inputStyle="width:150px"></p:calendar> <p:outputLabel value="有效状态:" /> <p:selectOneMenu id="create_validStatus" value="#{studentBean.createBoardDm.validStatus}" style="width:150px"> <f:selectItem itemLabel="有效" itemValue="Y" /> <f:selectItem itemLabel="无效" itemValue="N" /> </p:selectOneMenu> </h:panelGrid> </h:panelGrid> </p:outputPanel> </h:panelGrid> <h:panelGrid columns="2" responsive="true" styleClass="no-border"> <p:commandButton value="提交" actionListener="#{studentBean.createStudent}" update="@form:tabView:studentList:board_page" class="query" ajax="true" style="width:80px;" oncomplete="if (!args || !args.validationFailed) { PF('createStudent').hide(); }" /> <p:commandButton value="关闭" style="width:80px;" onclick="PF('createStudent').hide(); return false;" /> </h:panelGrid> </p:outputPanel> </cc:implementation> </html> 如何提交的时候才验证必填
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值