modalPanel and Process Validations step

[jruffin]

I have a custom validator on a t:inputText (validates international phone numbers).

Problem is: when the validation fails, the modalPanel hangs. The validation error message never shows giving the user a chance to correct it.

How do I overcome this issue?

Below are snippets:

<t:inputText id="cphone" value="#{searchForm.contact.phone}" size="27" maxlength="27">
 <f:validator validatorId="com.ach.util.ValidatorPhoneFax"/>
</t:inputText>
---
<a4j:commandButton
 value="Save"
 actionListener="#{searchForm.listenerSaveContact}"
 onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"/>

---
<rich:modalPanel id="mp1" minHeight="100" minWidth="200" height="100" width="300" zindex="300">
 <f:facet name="header">
 <t:outputText value="Saving CONTACT" />
 </f:facet>
 <t:outputText value="Saving your CONTACT changes to multiple databases!"/>
</rich:modalPanel>

[sergeysmirnov]

try:

<a4j:commandButton
 value="Save"
 actionListener="#{searchForm.listenerSaveContact}"
 onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"
 oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"/>

P.S. I do not see the different between the cases when validation passed or failed. You do Ajax request without reloading the whole page. So, you need to hide the message box explicitly in any case.

[jruffin]

Sorry I didn't show the whole picture. The commandButton has a action attribute defined. So, if validation passes then the action navigation proceeds.

The inputText with id="cphone" has a

<t:message for="cphone" errorClass="error" />

Adding

oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"

to the commandButton does hide the modalPanel. However, the validation message for "cphone" doesn't show.

[sergeysmirnov]

I do not see the action. How you process the navigation without it?
Also, I do not see <h:messages /> or <h:message for="..." /> in your snippet. So, can say nothing about the error message yet.

[jruffin]

Ok, here is everything:

<t:panelGroup>
 <t:inputText id="cphone" value="#{searchForm.contact.phone}" size="27" maxlength="27">
 <f:validator validatorId="com.ach.util.ValidatorPhoneFax"/>
 </t:inputText>
 <t:outputText value="ex. +000 000000-0000 x0000" styleClass="instructions"/>
 <t:htmlTag value="br"/>
 <t:message for="cphone" errorClass="error" />
</t:panelGroup>
...
<rich:modalPanel id="mp1" minHeight="100" minWidth="200" height="100" width="300" zindex="300">
 <f:facet name="header">
 <t:outputText value="Saving CONTACT" />
 </f:facet>
 <t:outputText value="Saving your CONTACT changes to CDM and to the AS400!"/>
</rich:modalPanel>
...
<a4j:commandButton
 value="Save"
 actionListener="#{searchForm.listenerSaveContact}"
 action="toContacts"
 onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"
 oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"/>

Given: cphone will fail the validator.
I click the commandButton, the modalPanel displays, the modalPanel hides, the same page displays without the validation message.

If I make cphone pass validation, I proceed based on action="toContacts" .

[jruffin]

Here is the validate method

public void validate(FacesContext arg0, UIComponent arg1, Object arg2)
 throws ValidatorException {

 Pattern pattern = Pattern.compile("^((\\+\\d{1,3}(-| )?\\(?\\d\\)?(-| )?\\d{1,3})|(\\d{2,3}))(-| )?(\\d{3,4})(-| )?(\\d{4})(( x)\\d{1,5}){0,1}$" );
 Matcher matcher = pattern.matcher(arg2.toString());

 boolean patternGood = false;
 while (matcher.find()){

 patternGood = true;
 }
 if (!patternGood){
 FacesMessage message = new FacesMessage("Invalid format for a phone/fax number");
 message.setSeverity(FacesMessage.SEVERITY_ERROR);
 throw new ValidatorException(message);
 }

[sergeysmirnov]

This is another story. Do not miss some important details next time.

So,

replace

<t:message for="cphone" errorClass="error" />

with

<a4j:outputPanel ajaxRendered="true">
 <t:message for="cphone" errorClass="error" />
</a4j:outputPanel>

Do not forget to define for your "toContacts" navigation case.