p:fileUpload-在上传之前验证表单 [英] p:fileUpload - Validate form prior to upload

问题描述

我希望能够在单击Primefaces中fileUpload控件的选择"按钮时被允许选择要上传的文件之前，在我的表单上触发验证.这可能吗?目前，用户可以单击选择"和上传"，而无需进行验证.这阻止了我的文档保存，但正在创建附件. 我知道我可以隐藏fileUpload控件，直到成功验证和保存表单为止，但如果可能的话，我希望在单击选择"按钮时调用验证. 我已经在onStart中尝试过remoteCommand调用，但似乎无法获得任何强制执行验证的功能.

I would like to be able to trigger validation on my form prior to being allowed to select the files for upload when clicking on the "Choose" button of the fileUpload control in Primefaces. Is this possible? At present the user can click on "Choose" and "Upload" without validation kicking in. This is preventing my document from saving but the attachments are being created. I know I could hide the fileUpload control until the form is successfully validated and saved but I would prefer to invoke validation when you click the "Choose" button if possible. I've tried remoteCommand calls in the onStart but can't seem to get anything to force validation to occur.

推荐答案

当通过组合Java脚本和p:remoteCommand单击p:fileUpload选择按钮时，可以触发表单验证.

It is possible to trigger form validation when p:fileUpload Choose button is clicked by combining Java Script and p:remoteCommand.

基本概念

• 拦截选择按钮"单击事件，阻止默认结果(打开文件选择器对话框)，然后运行p:remoteCommand，
• p:remoteCommand完成后，并且如果验证通过，请不要再次单击选择"按钮，直到再次更改表单输入元素上的某些数据为止.

• intercept Choose button click event, prevent default outcome (opening of file chooser dialog) and run p:remoteCommand instead,
• when p:remoteCommand completes, and if validation is OK, do not prevent Choose button clicks any more until some data on form input elements is changed again.

概念验证示例代码

在页面中添加此 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页面

Also here is xhtml page for quick testing

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

这篇关于p:fileUpload-在上传之前验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！