Việc tắt CommandButton chức năng nếu inputText xác nhận thất bại hoặc gọi ajax bắt đầu

Question

Tôi có đoạn mã sau bên trong một hình thức:

<p:panel id="panel" header="lalalala"> 
    <h:panelGrid columns="5"> 

     <h:outputLabel value="Enter name" for="name" /> 

     <p:inputText id="name" value="#{userBean.name}" 
      required="true" label="name" maxlength="15" 
      validatorMessage="oops" 
      requiredMessage="ooopps"> 
      <f:validateRegex 
       pattern="^somepattern$"> 
      </f:validateRegex> 
      <p:ajax event="blur" update="inputValidationMessage" /> 
     </p:inputText> 

     <p:message id="inputValidationMessage" showSummary="false" 
      for="name" /> 
     <p:watermark for="name" value="eg. John" /> 

    </h:panelGrid> 

    <p:commandButton id="submitButton" value="Submit" update="panel" 
     actionListener="#{userBean.save}" 
     onclick="handleOnclick" 
     oncomplete="handleAjaxResponse(xhr, status, args)"> 
    </p:commandButton> 
    <p:messages autoUpdate="true" globalOnly="true" showDetail="true" /> 
</p:panel> 

Vì vậy, các thông điệp xác nhận hoạt động tốt trên các yếu tố inputText. Nhưng nút gửi vẫn thực hiện yêu cầu Ajax khi được nhấp, mặc dù đầu vào không hợp lệ. Tôi muốn yêu cầu Ajax được gửi iff inputText là hợp lệ.

Tôi làm như thế nào?

Hơn nữa; có một trường hợp khác tôi muốn tắt nút. Đây là trường hợp inputText được xác thực và người dùng nhấp vào nút. Lý do cho điều này là, tôi không muốn người dùng nhầm lẫn các yêu cầu. (liên tục nhấn nút gửi)

Hiện tại, chức năng javascript handleOnclick chỉ hiển thị hộp thoại phương thức có nội dung "chờ". Vì hộp thoại đó là phương thức, nền không thể truy cập được. Tuy nhiên, điều đó vẫn không ngăn người dùng nhấn liên tục vì 1 giây trôi qua giữa hộp thoại onclick và modal hiển thị. Hơn nữa; cách tiếp cận này không ngăn chặn gửi dữ liệu không hợp lệ. Những gì bạn có thể đề nghị?

Tôi sử dụng JSF2.0 và Primefaces 3.0.

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Bạn có thể sử dụng thuộc tính disabled của nút cho nút đó. Chỉ cần đặt thành true bất cứ khi nào FacesContext#isPostback() trả lại false (vì vậy, đây là yêu cầu ban đầu) hoặc khi đó là true (do đó, gửi biểu mẫu), sau đó kiểm tra xem FacesContext#isValidationFailed() trả về true (vì vậy việc xác thực không thành công nói chung).

<p:commandButton ... disabled="#{not facesContext.postback or facesContext.validationFailed}" /> 

Bạn chỉ cần đảm bảo rằng bạn cũng cập nhật nút trên yêu cầu ajax để nó xuất hiện trở lại được bật hoặc tắt khi cần.

<p:ajax event="blur" update="inputValidationMessage submitButton" />