File is uploaded before form is validated

I'm having a problem with a form that has a file upload field. If a file is chosen for upload, it gets completely uploaded before the form is validated, and as it is for a print shop, said files could be quite large, meaning a rather long wait before someone is notified that they've missed a required field.

I've noticed that if I leave the very first field empty (first name), the validator catches it before the file uploads. But if I fill in a first name, and leave out any of the other required fields, that's when the file gets uploaded before validation.

How can I fix it so that the validation runs on the entire form before the file gets uploaded?

This is the form in question: http://www.digiprintshoppe.com/place-order/

Ok, I've updated to the latest version, but I'm still having the exact same problem.

The problem I am having occurs when the first field is filled out, and one or more of the others is left empty. What you tried was the other way around (first field empty, others filled in), and doing it that way, I get the exact same result as you did. I apologize if my description of the problem was unclear.

Thanks for taking the time to look at it, btw. :-)

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.

OK, I've implemented some simple client-side form validation to address this problem.

Go to http://validity.thatscaptaintoyou.com/ 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.

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

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

[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
}
?>

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 http://www.bimawards.com.au/submit for a demo.

Hope this helps!

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 (http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar) 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.

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 (http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar).

Make sure you have it working as it should. Then go download jquery.validity at http://validity.thatscaptaintoyou.com 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.

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

OK, so this code just tests to see if we are on the form page if(is_page('submit), then I manually start the validation usingjQuery.validity.start();

I then define my validation rules, then manually end the validation and get the validation status with jQuery.validity.end().valid; If there are no errors then jQuery.validity.end().valid 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.

jQuery("#gform_wrapper_1").after("<div id='fakeprogress'><h3>Uploading Files... Please Wait</h3></div>");
jQuery("#fakeprogress").hide();

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

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();
				}

			});

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