SweatCoder SweatCoder - 5 months ago 58
jQuery Question

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.

Answer

Since setCustomValidity throws runtime exceptions inside fine-uploader.js, the best way I could find to prevent fine-uploader from continuing with the upload in the midst of custom validation problem was to do this:

_uploadStoredFiles: function() { // find this line in fine-uploader.js
    if(!zgpValidationOK){ // add a var of your choice, set to true upstream
        return; // if var above becomes false in custom code, return now
    }

Works great for me.

Comments