lundi 20 juin 2016

Prevent form submit in certain cases

I have my FineUploader working great except for 1 scenario. There are cases where one of my form elements (such as a textbox or pulldown) has invalid data. I want to prevent the upload from occurring in this case. Somehow FineUploader is circumventing my form validation and submitting anyway, as long as a valid image has been selected. Here is my form tag:

<form action="./fine-uploader/server/endpoint.php" id="qq-form" onsubmit="return checkForm(this)">

My checkForm() function correctly returns true/false back to the onSubmit of the form. When it returns false, normally that would prevent the form from submitting, but as long as FineUploader has a valid image (selected by user), it submits in all cases, even when checkForm() returns false.

I have already tried this:

form: { interceptSubmit: false},

That works, but it has an awful side effect: rather than submitting the form async, it redirects to my php handler (I suppose it's doing a form GET or POST) rather than doing a nice async submission.

I simply need a way to prevent form submission at times of my choosing, and enable form submission when wanted.

Here are my settings currently:

<script>
    var manualUploader = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger'),
        template: 'qq-template-manual-trigger',
        request: {
            endpoint: './fine-uploader/server/endpoint.php'
        },
        thumbnails: {
            placeholders: {
                waitingPath: './fine-uploader/placeholders/waiting-generic.png',
                notAvailablePath: './fine-uploader/placeholders/not_available-generic.png'
            }
        },
        validation: {
            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'],
            itemLimit: 1,
            sizeLimit: 307200 // 300 kB = (300kb * 1024 bytes) = 307200
        },
        callbacks: {
            onComplete: function(id, name, responseJSON) {
                if (responseJSON.success === true) {
                    //location.href = "ManageAds.php";
                    location.href = "index.php";
                } else {
                    console.log(responseJSON);
                    //history.go(0);
                }

                //console.log(responseJSON.success);
            },
        },
        autoUpload: false,
        debug: false,
        multiple: false
    });

    qq(document.getElementById("trigger-upload")).attach("click", function() {
        manualUploader.uploadStoredFiles();
    });
</script>

How can I prevent form submission when one of my validators fails? If you have something elegant and built into FineUploader, great. If not, I'll be happy with any type of hack, I just need to get this working. Thanks.

Aucun commentaire:

Enregistrer un commentaire