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 ;)
Posted 12 years ago on Wednesday August 1, 2012 |
Permalink
