提交後在彈出窗口中顯示字段的錯誤消息

Question

我想在jsf中使用下面的代碼打開一個彈出窗口。

<a href="#" data-toggle="modal" data-backdrop="static" data-target="#forgotPassword">Forgot password</a> 

<div class="modal fade" jsf:id="forgotPassword"> 
    <div class="modal-dialog"> 
     <form jsf:id="reset-password-form"> 
      <div class="modal-content"> 
       <div class="modal-header">     
        <h4 class="modal-title">Request for new password</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label for="inputEmail">EmailId</label> 
         <div class="col-sm-9"> 
          <input type="text" class="form-control" jsf:id="inputEmail" 
           jsf:value="#{myBean.passwordResetEmail}" 
           name="inputEmail" /> 
          <h:message for="inputEmail" /> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button class="btn btn-primary" 
         jsf:action="#{myBean.resetPassword}">sendPassword</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

我在這裏面臨一些問題。

1. 當用戶輸入錯誤的電子郵件ID時，用戶應在同一頁面上，並顯示錯誤。但是我看到，當輸入無效的emailId時，彈出窗口會自動關閉。
2. 我也想顯示成功消息。

任何人都可以幫助我如何做到這一點。

Answer 1

當用戶輸入錯誤的電子郵件ID時，用戶應在同一頁面上，並顯示錯誤。但是我看到，當輸入無效的emailId時，彈出窗口會自動關閉。

確實您正在同步提交表單並執行完整頁面重新加載。正是完整的頁面重新加載導致了對話框的「自動關閉」（它實際上並沒有關閉，這完全像在打開對話框後直接在瀏覽器中按F5鍵）。您需要異步提交表單並僅執行部分重新加載。

你可以做到這一點，只需在UICommand組件封裝<f:ajax>，酷似平均JSF教程所示<h:commandButton>（這你<button jsf:action>passthrough element最終被轉換到）。

<button ... jsf:action="#{myBean.resetPassword}"> 
    <f:ajax execute="@form" render="@form" /> 
</button> 

兩個execute和render屬性指示在該特定示例中，整個表格必須被處理，且只有形式本身必須被部分地更新。只要窗體在模態對話框內，而不在外面，那麼這將保持模態對話框打開（至少在HTML DOM樹中）。

---

我也想顯示成功的消息也是如此。

只需在操作方法中添加（全局）面孔消息。

public void resetPassword() { 
    // ... 

    FacesMessage message = new FacesMessage("Some success message"); 
    FacesContext.getCurrentInstance().addMessage(null, message); 
} 

<h:messages globalOnly="true" /> 

甲null客戶ID表示一個全局面消息，並且當globalOnly="true"設置那些纔會顯示。