Validation for popupPanel

[strannik]

Hi

I assume this answer was reviewed a lot of times. However my concrete sample doesn't work properly.

I have a popupPanel with input fields. I want to validate fields before submit and show error messages if some errors occurred.

The popupPanel shouldn't be closed in that case. However my popupPanel closes even if there are validation errors.

RichFaces 4.2.2

JSF 2.1

										<a4j:commandButton render="studyWindow"
											oncomplete="#{rich:component('studyWindow')}.show()"
											value="#{msg['buttons.add']}">
										</a4j:commandButton>

	<rich:popupPanel id="studyWindow" autosized="true" width="350">
		<h:form id="fieldForm">
			<h:messages id="error" />

			<h:panelGrid columns="2" styleClass="label left">
				<h:outputText value="#{msg['study.years']}" />
					<h:inputText value="#{currentStudy.startYear}" size="6">
						<f:validator validatorId="numericValidator" />
						<f:attribute name="validationMessage"
						value="#{msg['study.startyear.invalid']}" />
					</h:inputText>
			</h:panelGrid>
			<a4j:commandButton
				render="educationPanel"
				action="#{accountController.saveStudy(currentStudy, account)}"
				oncomplete="windowclose();" value="#{msg['buttons.save']}" />
		</h:form>
	</rich:popupPanel>
	<script type="text/javascript">
	function windowclose() {

if(#{facesContext.maximumSeverity==null}) {

}

#{rich:component('studyWindow')}.hide();

}

</script>

[iabughosh]

Hello Morenets,

i suggest you do the following :

<h:form id="mainForm">

     your page code

</h:form>

<h:form id="popupForm">

     <rich:popupPanel id="yourPopupId" domElementAttachment="form">

          ....

     </rich:popupPanel>

</h:form>

give it a try,

regards.

[strannik]

Hi, thank  you for the small hint. Unfortunately the modal panel still closes even if validation fails.

Here is a4j:log

debug[16:14:52.867]: New request added to queue. Queue requestGroupingId changed to fieldForm:j_idt1065

debug[16:14:52.868]: Queue will wait 0ms before submit

debug[16:14:52.869]: richfaces.queue: will submit request NOW

info [16:14:52.872]: Received 'begin' event from <input id=fieldForm:j_idt1065 ...>

info [16:14:53.029]: Received 'beforedomupdate' event from <input id=fieldForm:j_idt1065 ...>

debug[16:14:53.031]: Server returned responseText: <?xml version='1.0' encoding='UTF-8'?> <partial-response><changes><update id="javax.faces.ViewState"><![CDATA[e110s1]]></update><extension id="org.richfaces.extension"><complete>windowclose();;</complete></extension></changes></partial-response>

info [16:14:53.033]: Listing content of response changes element:

Element update for id=javax.faces.ViewState

<update id="javax.faces.ViewState"><![CDATA[e110s1]]></update>

Element extension for id=org.richfaces.extension

<extension id="org.richfaces.extension"><complete>windowclose();;</complete></extension>

debug[16:14:54.208]: richfaces.queue: ajax submit successfull

debug[16:14:54.209]: richfaces.queue: Nothing to submit

info [16:14:54.210]: Received 'success' event from <input id=fieldForm:j_idt1065 ...>

info [16:14:54.211]: Received 'complete' event from <input id=fieldForm:j_idt1065 ...>

[iabughosh]

could you add rich:messages to your forms, lets see if it shows anything.

[strannik]

Hi, rich:messages component shows error messages but popup panel still closes.

a4j:log

debug[16:50:35.804]: New request added to queue. Queue requestGroupingId changed to fieldForm:j_idt941

debug[16:50:35.806]: Queue will wait 0ms before submit

debug[16:50:35.808]: richfaces.queue: will submit request NOW

info [16:50:35.810]: Received 'begin' event from <input id=fieldForm:j_idt941 ...>

info [16:50:35.965]: Received 'beforedomupdate' event from <input id=fieldForm:j_idt941 ...>

debug[16:50:35.966]: Server returned responseText: <?xml version='1.0' encoding='UTF-8'?> <partial-response><changes><update id="fieldForm:j_idt1062"><![CDATA[<span class="rf-msgs " id="fieldForm:j_idt1062"><span class="rf-msgs-err" id="fieldForm:j_idt1062:fieldForm:j_idt939"><span class="rf-msgs-sum">fieldForm:j_idt939: Validation Error: Value is required.</span></span></span>]]></update><update id="javax.faces.ViewState"><![CDATA[e120s1]]></update><extension id="org.richfaces.extension"><complete>windowclose();;new RichFaces.ui.Message(&quot;fieldForm:j_idt1062&quot;,{&quot;isMessages&quot;:true} );</complete></extension></changes></partial-response>

info [16:50:35.969]: Listing content of response changes element:

Element update for id=fieldForm:j_idt1062

<update id="fieldForm:j_idt1062"><![CDATA[<span class="rf-msgs " id="fieldForm:j_idt1062"><span class="rf-msgs-err" id="fieldForm:j_idt1062:fieldForm:j_idt939"><span class="rf-msgs-sum">fieldForm:j_idt939: Validation Error: Value is required.</span></span></span>]]></update>

Element update for id=javax.faces.ViewState

<update id="javax.faces.ViewState"><![CDATA[e120s1]]></update>

Element extension for id=org.richfaces.extension

<extension id="org.richfaces.extension"><complete>windowclose();;new RichFaces.ui.Message("fieldForm:j_idt1062",{"isMessages":true} );</complete></extension>

debug[16:50:37.089]: richfaces.queue: ajax submit successfull

debug[16:50:37.091]: richfaces.queue: Nothing to submit

info [16:50:37.093]: Received 'success' event from <input id=fieldForm:j_idt941 ...>

info [16:50:37.095]: Received 'complete' event from <input id=fieldForm:j_idt941 ...>

[iabughosh]

please post your xhtml after modifications.

[strannik]

After few attempts I figured out what was the issue root.

The script at the page bottom wasn't rendered after Ajax request. So facesContext.maximumSeverity remained unchanged.

There are two solutions:

1) Either move contents of the windowclose function into oncomplete field of commandButton

2) Or surround script with dynamically updated component:

<a4j:outputPanel ajaxRendered="true">

    <script type="text/javascript">

    function windowclose() {

         if(#{facesContext.maximumSeverity==null}) {

              #{rich:component('studyWindow')}.hide();

}}

</script>

</a4j:outputPanel>

By the way, the approach described below doesn't work because fieldForm:error is always present in the component tree now.

https://community.jboss.org/wiki/ModalPanelValidation

	if(document.getElementById('fieldForm:error') == null) {
	#{rich:component('studyWindow')}.hide();

}