0

I have a authentication form , When I click on command button it should refresh the form in case the login is failed , else redirect the user

I create ajax inside commandButton to check if login is failed , if it is the OutputText will change to : Login failed

I don't what I need to modify to make it work

Here my JSF , 

 <h:form id="form_login" > <div> <!-- email --> <div class="input-group input-group-sm"> <h:inputText id="mail" type="text" class="form-control" placeholder="Email" value="#{login.mail}" required="true" requiredMessage="Entrez votre mail svp" validatorMessage="Email invalide"> <f:ajax event="keyup" render="messageerreur" /> <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" /> </h:inputText> <span class="input-group-addon"><i class="fa fa-check"></i></span> </div> <h:message id="messageerreur" for="mail" class="recover-password" style="color:#eb6a5a" /> <!-- Password --> <div class="input-group input-group-sm"> <h:inputSecret id="password" class="form-control" placeholder="Password" value="#{login.pass}" required="true" requiredMessage="Entrez votre password svp" > </h:inputSecret> <span class="input-group-addon"><i class="fa fa-times"></i></span> </div> <h:message id="erreurpass" for="password" class="recover-password" style="color:#eb6a5a" /> </div> <br></br> <div class="pull-right"> <h:commandButton id="login_button" action="#{login.authentification()}" value="Login" class="btn btn-login"> <f:ajax onevent="click" execute="form_login" render="login_failed"/> </h:commandButton></div> <div class="center"> <h:outputText id ="login_failed" class="recover-password" value="#{login.failed}" /> </div> </h:form>

Here the Function in managed Bean : 

public String authentification() { System.out.println("Hi"); System.out.println(getMail()); System.out.println(getPass()); if(getMail()!=null && getPass()!=null) { login_success=marchandBo.authentication(getMail(), getPass()); } if(login_success) return "Dashboard_user.xhtml"; else setFailed("Login failed"); return null; }
Improve this question
2
  • 1
    I'm surprised this works. Are you sure you have class="form-control", etc? Also try changing from action to f:ajax listener="#{...}". Commented Mar 5, 2014 at 21:56
  • Oooh , i t works Thank you , Please make it as an answer Commented Mar 6, 2014 at 9:44

2 Answers 2

Reset to default
2

There are several problems with your code:

  1. You define a class attribute on JSF components. I've seen this cause all sorts of weirdness. Maybe you wanted styleClass?

  2. JSF will strip out your HTML5 placeholder attribute unless you use a custom renderer (like the omnifaces Html5RenderKit). See the link for how you can do this in native JSF-2.2.

  3. Your concrete problem is probably caused by the onevent attribute. According to the f:ajax documentation the attribute name is event. You can leave it off to trigger the ajax request on the "default behavior", which in the case of h:commandButton is submit. With a event="click" attribute, you actually prevent the default behavior of submitting the form the standard way. This is why adding a listener action worked - it duplicated what you had in your action attribute.

To sum it up, change your code to the following:

<h:commandButton id="loginBtn" action="#{login.authentification}" value="Login" styleClass="btn btn-login"> <f:ajax execute="@form" render="login_failed"/> </h:commandButton>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The attribute onevent of the f:ajax tag is intended to be a javascript function that handles the event. What you want is event="click". This attribute describes which DOM event will trigger the action.

Improve this answer

1 Comment

I changed , but it doesnt work .. when I click on button it reload the page , Iwant to reload just the form

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.