Popup panel not displaying errors / submitting

Question

I am using JSF 2, with richfaces 4.x. I have created a login form which is in a popup. The popup does not submit and return the errors properly, nor does it allow me to login.

Here is my login popup:

        <rich:popupPanel id="loginPopup">
            <h:form id="login" class="compact-form clearfix">
                <h1>Access your Account</h1>
                <fieldset id="inputs">
                    <h:outputLabel value="Username:" for="username"/><br/>
                    <h:inputText id="username" value="#{viewLogin.loginName}" required="true" requiredMessage="Please enter your username">
                        <f:validateLength maximum="20" minimum="3" />
                    </h:inputText>
                    <a4j:outputPanel ajaxRendered="true">
                        <h:message for="username" />
                    </a4j:outputPanel>

                    <h:outputLabel value="Password:" for="password"/><br/>
                    <h:inputSecret id="password" value="#{viewLogin.password}" required="true" requiredMessage="Enter your password">
                        <f:validator validatorId="LoginValidator" />
                        <f:validateLength maximum="20" minimum="5" />
                    </h:inputSecret>
                    <a4j:outputPanel ajaxRendered="true">
                        <h:message for="password" />
                    </a4j:outputPanel>
                </fieldset>
                <fieldset id="actions">
                    <a4j:commandButton value="Submit" id="submit" action="#{viewLogin.login()}" immediate="false" 
                           execute="username password @this"
                           render="username password"  oncomplete="if (#{facesContext.maximumSeverity == null}) {#{rich:component('loginPopup')}.hide();}"/>
                    <h:commandButton value="Cancel">
                        <rich:componentControl operation="hide" target="loginPopup"/>
                    </h:commandButton>
                    <h:link value="Forgot password?" outcome="forgotpassword"/>
                    <h:link value="Forgot username?" outcome="forgotusername"/>
                    <h:link value="Create account" outcome="createuser"/>
                </fieldset>
            </h:form> 
        </rich:popupPanel>

Now when i press the submit button the h:inputSecret styles get changed around and the field is no login a input type password and will show my password.

Why is my login not submitting for validation / rendering errors?

Note: The form works without the popup and a4j tags.

Answer 1

I just double-checked your source code in RF 4.3.3.Final, just removing the LoginValidator you are using, but was not provided :

<rich:popupPanel id="loginPopup" show="true">
    <h:form id="login" class="compact-form clearfix">
        <h1>Access your Account</h1>
        <fieldset id="inputs">
            <h:outputLabel value="Username:" for="username"/><br/>
            <h:inputText id="username" value="#{viewLogin.loginName}" required="true" requiredMessage="Please enter your username">
                <f:validateLength maximum="20" minimum="3" />
            </h:inputText>
            <a4j:outputPanel ajaxRendered="true">
                <h:message for="username" />
            </a4j:outputPanel>
             <h:outputLabel value="Password:" for="password"/><br/>
             <h:inputSecret id="password" value="#{viewLogin.password}" required="true" requiredMessage="Enter your password">
                <f:validateLength maximum="20" minimum="5" />
             </h:inputSecret>
             <a4j:outputPanel ajaxRendered="true">
                <h:message for="password" />
             </a4j:outputPanel>
        </fieldset>
        <fieldset id="actions">
            <a4j:commandButton value="Submit" id="submit" action="#{viewLogin.login()}" immediate="false"
                   execute="username password @this"
                   render="username password"  oncomplete="if (#{facesContext.maximumSeverity == null}) {#{rich:component('loginPopup')}.hide();}"/>
            <h:commandButton value="Cancel">
                <rich:componentControl operation="hide" target="loginPopup"/>
            </h:commandButton>
        </fieldset>
    </h:form>
</rich:popupPanel>

with a minimized Seam 2.1.3.CR1 injected Bean

import org.jboss.seam.annotations.Name;

@Name("viewLogin")
public class TestBean {

private String loginName;
private String password;

public String getPassword() {
    return password;
}
public void setPassword(String password) {
    this.password = password;
}
public String getLoginName() {
    return loginName;
}
public void setLoginName(String loginName) {
    this.loginName = loginName;
}

public String login() {
    System.out.println("Login called");
    return "";
}
}

and the inputSecret field stays secret. My suggestion would be

• to add a global h:messages (has to be rerendered with the button click) or a global rich:messages to check for other possible reasons.
• also double-check the LoginValidator-Bean for any possible problems
• be sure there is no other PhaseListener/JavaScript actively changing the DOM

Sometimes, popupPanel shows strange behaviour in combination with forms (being nested forms. You can modify the DOM Element attaching via the attribute domElementAttachment.

Hope it helps...