p : fileUpload - 업로드하기 전에 양식 유효성 검사

Question

Primeface에서 fileUpload 컨트롤의 "선택"버튼을 클릭 할 때 업로드 할 파일을 선택하기 전에 양식에서 유효성 검사를 실행하고 싶습니다. 이것이 가능한가? 현재 사용자는 유효성 검사없이 "선택"및 "업로드"를 클릭 할 수 있습니다. 이로 인해 내 문서는 저장되지 않지만 첨부 파일이 생성됩니다. 양식을 성공적으로 확인하고 저장할 때까지 fileUpload 컨트롤을 숨길 수 있지만 가능한 경우 "선택"버튼을 클릭 할 때 유효성 검사를 호출하는 것이 좋습니다. onStart에서 remoteCommand 호출을 시도했지만 유효성 검사를 강제로 수행 할 수없는 것으로 보입니다.

Answer 1

p:fileUpload 자바 스크립트와 p:remoteCommand을 결합하여 선택 버튼을 클릭하면 양식 유효성 검사를 트리거 할 수 있습니다.

기본 개념

• 차단 유효성 검사가 OK 인 경우
• p:remoteCommand 완료가하고, 그렇지 않은 경우, 기본 결과 (파일 선택 대화 상자의 개방)를 방지하고 대신 p:remoteCommand을 실행 버튼을 클릭 이벤트를 선택 prevent 폼 입력 요소의 일부 데이터가 다시 변경 될 때까지 더 이상 버튼 클릭을 선택하지 마십시오. 개념 예제 코드의

증거는

이 페이지

<script> 
      var triggerValidation; 
      window.onload = function() { 
       //initially (after page is loaded) trigger validation on Choose btn click 
       triggerValidation = true; 
       //define button click listener 
       registerChooseBtnClick(); 
      }; 

      function registerChooseBtnClick() { 
       //var chooseBtn = document.getElementsByClassName("ui-fileupload-choose")[0]; 
       // or if you define p:upload widgetVar you can use PF function    
       var chooseBtn = PF('fileUploadWidget').chooseButton[0]; 
       chooseBtn.addEventListener('click', fnRef, false); 
      } 

      var fnRef = function (event) { 
       console.log("Button clicked"); 
       if (triggerValidation) { 
        //prevent file browser to open 
        event.preventDefault(); 
        //trigger validation via p:remoteCommand; 
        submitSelection(); 
       } else { 
        //File browser will be opened at this point 
       } 
      }; 

      function checkIfValidationFailed(xhr, status, args) { 
       if (args) { 
        if (args.validationFailed) { 
         console.log("Validation failed"); 
         triggerValidation = true; 
        } else { 
         triggerValidation = false; 
        } 
       } 
      } 

      //call each time when form input elements (inputText, ...) change value 
      function forceValidation(){ 
       triggerValidation = true; 
      } 

     </script> 

이 자바 스크립트을 추가하고 페이지를 추가 : 여기

  <p:remoteCommand 
       name="submitSelection" process="@form" 
       oncomplete="checkIfValidationFailed(xhr, status, args)" resetValues="true"/> 

또한 remoteCommand

 <h:form id="form"> 
      <p:messages autoUpdate="true"/> 
      <p:panelGrid columns="1"> 
       <!--size is integer variable--> 
       <p:inputText id="size" maxlength="3" 
          value="#{yourBean.size}" 
          required="true" requiredMessage="Size is missing" 
          onchange="forceValidation();"/> 

       <p:fileUpload 
        id="upload" 
        widgetVar="fileUploadWidget" 
        fileUploadListener="#{yourBean.onUpload}" 
        multiple="true" 
        allowTypes="/(\.|\/)(jpg|png)$/" /> 
      </p:panelGrid> 

      <p:remoteCommand 
       name="submitSelection" process="@form" 
       oncomplete="checkIfValidationFailed(xhr, status, args)" resetValues="true"/> 
      <p:commandButton 
       id="submitBtn" value="Sumbit" process="@form" 
       actionListener="#{yourBean.onSubmit()}"/> 
     </h:form> 

 <h:form id="form"> 
      <p:messages autoUpdate="true"/> 
      <p:panelGrid columns="1"> 
       <!--size is integer variable--> 
       <p:inputText id="size" maxlength="3" 
          value="#{yourBean.size}" 
          required="true" requiredMessage="Size is missing" 
          onchange="forceValidation();"/> 

       <p:fileUpload 
        id="upload" 
        widgetVar="fileUploadWidget" 
        fileUploadListener="#{yourBean.onUpload}" 
        multiple="true" 
        allowTypes="/(\.|\/)(jpg|png)$/" /> 
      </p:panelGrid> 

      <p:remoteCommand 
       name="submitSelection" process="@form" 
       oncomplete="checkIfValidationFailed(xhr, status, args)" resetValues="true"/> 
      <p:commandButton 
       id="submitBtn" value="Sumbit" process="@form" 
       actionListener="#{yourBean.onSubmit()}"/> 
     </h:form>