How to define form action in JSF? - forms

Question

In order to replace the default Spring security login form I came up with this solution:
<form name="f" action="../j_spring_security_check" method="POST" >
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Login" />
</form>
But instead of plain <form> tag I would like to use <h:form> since Primefaces components only work within <h:form>. Using <h:form> the form action will be set automatically by JSF to the current page, not to the value set by me in the example above. Where to I have to code the action "../j_spring_security_check" now? I tried putting it into the <h:commandButton> as follows but that doesn't work:
<h:form name="f">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Click here" action="../j_spring_security_check" />
</form>
It leads to the error message Unable to find matching navigation case with from-view-id '/login.xhtml' for action '../j_spring_security_check' with outcome '../j_spring_security_check'.
Is it the only way to define a navigation case in faces-config.xml? I want to avoid using a bean for this simple use case.

Answer 1

The best solution for me is to use the default <button> tag instead. Since typical button styling is not being applied (in my case I am using Primefaces), I set it manually. Here's the whole result:
<h:outputStylesheet library="primefaces" name="jquery/ui/jquery-ui.css" />
<h:outputStylesheet library="css" name="login.css" />
<div class="message">
<c:if test="#{param.error == 1 and SPRING_SECURITY_LAST_EXCEPTION != null}">
<span class="error">#{SPRING_SECURITY_LAST_EXCEPTION.message}</span>
</c:if>
</div>
<div class="login">
<form action="../j_spring_security_check" method="post">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputSecret id="j_password" />
</h:panelGrid>
<div class="submit">
<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Login</span>
</button>
</div>
</form>
</div>

Answer 2

<h:form id="login" prependId="false" onsubmit="document.getElementById('login').action='j_security_check';">

Answer 3

Your action attribute should be an EL expression like follows:
action="#{managedBean.method}"

Answer 4

Your best chance is to use the onclick property of the button. This is an example with a primefaces commandButton, but it will also work for jsf components because it uses the (native) javascript onclick function.
<h:form>
<p:commandButton value="Submit" onclick="alert('JS!')" actionListener="#{tweetBean.addTweet()}" update=":tabView,:trends,:tweetsnr" />
</h:form>