Q:

Ajax in JSF load all page

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;
    }

A:

There are several problems with your code:

You define a class attribute on JSF components.  I've seen this cause all sorts of weirdness.  Maybe you wanted styleClass? 
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. 
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>

