Gravity Support Forums Topic: File is uploaded before form is validated

Gravity Support Forums Topic: File is uploaded before form is validated https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated Gravity Support Forums Topic: File is uploaded before form is validated en-US Sun, 19 Apr 2026 23:48:16 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Quill Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68892 Wed, 01 Aug 2012 01:02:09 +0000 Quill Studios 68892@https://legacy.forums.gravityhelp.com/ OK, its pretty simple to add both the validation and file upload indicator using jquery.validity and Kevin's technique i mentioned. Firstly, go ahead and go through the process to add the upload indicator using the guide Kevin made (<a href="http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar)" rel="nofollow">http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar)</a>. Make sure you have it working as it should. Then go download jquery.validity at <a href="http://validity.thatscaptaintoyou.com" rel="nofollow">http://validity.thatscaptaintoyou.com</a> add the jquery and css files to your page as outlined in my previous post. Now, this is where it's a bit different from the previuos example without the uploading indicator. We need to load the start and end methods of validity manually so we can return the result of the validation - we only want to show the upload indicator if the validation found no errors, if it found errors we want nothing to happen until the errors have been fixed by the user. Here's the code you need to put in you theme's header.php file, i'll explain it below. <pre><code><?php // jQuery form validation code if(is_page('submit')) { ?> <script type="text/javascript"> jQuery(document).ready(function() { function validateForm() { // Start validation: jQuery.validity.start(); jQuery('input#input_1_1_3, input#input_1_1_6') .require('Please enter your name'); jQuery('input#input_1_2, input#input_1_2_2') .require('Please enter a valid email address') .match('email', 'This field must contain a valid email address') .equal('Email addresses do not match.'); jQuery('input#input_1_3') .require('Please enter your phone number') .match('number', 'Please enter your phone number'); var result = jQuery.validity.end().valid; return result; } // End validity function jQuery("#gform_wrapper_1").after("<div id='fakeprogress'><h3>Uploading Files... Please Wait</h3></div>"); jQuery("#fakeprogress").hide(); jQuery("#gform_wrapper_1 .gform_footer input, #gform_wrapper_1 .gform_footer a").on('click', function(e) { if(validateForm()) { jQuery("#fakeprogress").delay(1000).show('slow'); } else { e.preventDefault(); } }); }); // End document.ready function </script> <?php } ?></code></pre> OK, so this code just tests to see if we are on the form page <code>if(is_page('submit)</code>, then I manually start the validation using<code>jQuery.validity.start();</code> I then define my validation rules, then manually end the validation and get the validation status with <code>jQuery.validity.end().valid;</code> If there are no errors then <code>jQuery.validity.end().valid</code> returns TRUE, if there are errors i believe it returns FALSE. Then we use the code from Kevin to create and hide the dom elements for the upload indicator. <pre><code>jQuery("#gform_wrapper_1").after("<div id='fakeprogress'><h3>Uploading Files... Please Wait</h3></div>"); jQuery("#fakeprogress").hide();</code></pre> This next part is where the magic happens, when the submit button is click it tests to see if there were any errors on the form, if not it submits the form and displays the upload indicator - if there were errors it does nothing <pre><code>jQuery("#gform_wrapper_1 .gform_footer input, #gform_wrapper_1 .gform_footer a").on('click', function(e) { if(validateForm()) { jQuery("#fakeprogress").delay(1000).show('slow'); } else { e.preventDefault(); } });</code></pre> This code is customized to my needs, name of the page the form is on will be different for you, as will the validation rules and possibly the element(s) to attach the on click event handler to. To find the id's of the form inputs to use in the validation rules use the firebug plugin for firefox, you can just right-click on an element and find it's class and id. If you have trouble following or implementing it just let me know and i'll try to help ;) Chris Hajer on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68699 Tue, 31 Jul 2012 02:22:50 +0000 Chris Hajer 68699@https://legacy.forums.gravityhelp.com/ Please do post your procedure. I'd like to see how you pulled it off, and others would as well, I'm sure. Quill Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68495 Mon, 30 Jul 2012 01:30:05 +0000 Quill Studios 68495@https://legacy.forums.gravityhelp.com/ No worries Chris, always keen to help out where i can ;) I've also combined the clever jQuery upload progress indicator posted by Kevin Flahaut (<a href="http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar" rel="nofollow">http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar</a>) with this client side validation, with these two additions file uploads with gravity forms are really pretty user friendly. If anyone wants some help implementing these together let me know and i'll post a short description of what i did. Chris Hajer on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68473 Sun, 29 Jul 2012 22:34:04 +0000 Chris Hajer 68473@https://legacy.forums.gravityhelp.com/ Thank you for posting that. Looks like a nice solution. I tested the demo and it works as expected. Quill Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68470 Sun, 29 Jul 2012 21:33:26 +0000 Quill Studios 68470@https://legacy.forums.gravityhelp.com/ OK, I've implemented some simple client-side form validation to address this problem. Go to <a href="http://validity.thatscaptaintoyou.com/" rel="nofollow">http://validity.thatscaptaintoyou.com/</a> and download the jquery.validity plugin (you could use others, but this is the one i used). Add the jquery.validity files to you themes js folder, or whatever folder you are keeping the javascript files in. Include the validity javascript file and css file in your themes header.php file. <pre><code><link type="text/css" rel="Stylesheet" href="<?php echo get_template_directory_uri() ?>/js/validity/jquery.validity.css" /> <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/validity/jQuery.validity.min.js"></script></code></pre> Make sure the validity javascript file is included after jQuery has been included. Add the following code (you'll need to change it based on your needs and setup, but this should give you a good starting point). <pre><code>[php] if(is_page('submit')) { ?> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('form#gform_1').validity(function() { jQuery('input#input_1_1_3, input#input_1_1_6') .require('Please enter your name'); jQuery('input#input_1_2, input#input_1_2_2') .require('Please enter a valid email address') .match('email') .equal('Email addresses do not match.'); jQuery('input#input_1_3') .require('Please enter your phone number') .match('number', 'Please enter your phone number'); }); // End validity function }); // End document.ready function </script> <?php } ?></code></pre> This code just tests to see whether the user is on the page with the form, then it loads the validity function, pretty simple. Validity has pretty thorough documentation so if you run into probs check it out. Also, this works best when you aren't using ajax to submit the form. You can see the form I've used it on at <a href="http://www.bimawards.com.au/submit" rel="nofollow">http://www.bimawards.com.au/submit</a> for a demo. Hope this helps! Chris Hajer on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68381 Sun, 29 Jul 2012 00:19:24 +0000 Chris Hajer 68381@https://legacy.forums.gravityhelp.com/ I've also worked around that limitation in the past by having the file upload on another form, after the initial information is validated. Submit form 1 with all the relevant information, then, if you are accepting large files, redirect the visitor to the second form which has the upload functionality. Quill Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-68376 Sat, 28 Jul 2012 22:52:54 +0000 Quill Studios 68376@https://legacy.forums.gravityhelp.com/ I see what Carl is saying, here, but you can validate before the upload is performed, i don't know why he being so stubborn on this point. Its ridiculous is say that users should wait until a file is uploaded, which in my case is up to 20-30 minutes, before they are told they had a typo in their email address. I'm planning on implementing some seperate jQuery validation to pick up any errors in the form BEFORE the request is sent to the server. It's very simple and should be an easy fix to this prob, I'll do it tomorrow and re-post to tell others how it can be done. MPC Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-23394 Fri, 15 Apr 2011 13:00:17 +0000 MPC Studios 23394@https://legacy.forums.gravityhelp.com/ Strange, though, that it seems to show the error immediately when I leave the first field empty. ...and of course, now that I go to try it again so I can take a screenshot to show you, it isn't doing it anymore. May have been a browser issue those few times, I suppose. I guess there isn't much that can be done, then. I very much appreciate your patience with me. I have found the forum post outlining <a href="http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar#post-6584" rel="nofollow">how to add a pseudo progress bar for file uploads</a> (which I'm thinking will help alleviate possible confusion), and implemented it successfully (though it's commented out right now). Do you know if it's possible to have it disappear when validation errors come up? Or should I ask this in a new thread? Carl Hancock on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-23390 Fri, 15 Apr 2011 12:49:49 +0000 Carl Hancock 23390@https://legacy.forums.gravityhelp.com/ There isn't anyway around that. The upload is part of the form submit action. The form isn't fully submitted until the upload is complete. That is how form submit actions work if they have file upload fields. The validation is also done when the form is submitted, so it doesn't know there is errors until the form is submitted and by extension the form isn't completely submitted until file uploads on the form have been completed and the form action is complete. Validation isn't done client side, it's done server side to prevent field tampering. If it was done purely client side with javascript you could do validation before a form is submitted, but that isn't how it works. MPC Studios on "File is uploaded before form is validated" https://legacy.forums.gravityhelp.com/topic/file-is-uploaded-before-form-is-validated#post-23388 Fri, 15 Apr 2011 12:45:43 +0000 MPC Studios 23388@https://legacy.forums.gravityhelp.com/ Understand, I don't care if the file is uploaded during validation; that's fine. The problem I have is that it waits until the upload is completely finished before telling me there's an error in the form, and for some people, that can be several minutes. From what you describe as expected behavior, and from what I've seen when I leave the first field empty, validation errors should show up almost immediately (or at least within a few seconds), not several minutes after the user has hit the submit button.