p:fileUpload - 在上传之前验证表单

Question

单击 Primefaces 中 fileUpload 控件的“选择”按钮时，我希望能够在允许选择要上传的文件之前触发我的表单验证。这可能吗？目前，用户可以单击“选择”和“上传”而不进行验证。这会阻止我的文档保存，但正在创建附件。 我知道我可以隐藏 fileUpload 控件，直到成功验证并保存表单，但如果可能，我更愿意在单击“选择”按钮时调用验证。 我已经在 onStart 中尝试了 remoteCommand 调用，但似乎没有任何东西可以强制进行验证。

Answer 1

结合Java Script和p:remoteCommand，点击p:fileUpload选择按钮时可以触发表单验证。

基本概念

• 拦截选择按钮单击事件，阻止默认结果（打开文件选择器对话框）并改为运行p:remoteCommand，
• 当p:remoteCommand 完成时，如果验证成功，则在再次更改表单输入元素上的某些数据之前，不要再阻止选择按钮单击。

概念证明示例代码

在您的页面中添加此 Java 脚本

    <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

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

这里还有用于快速测试的 xhtml 页面

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