Help integrating jQuery plugin with form validation.

Transloadit
1

Archived from the Transloadit support forum. Originally posted on May 27, 2011; details may be outdated, see our docs for current behavior. Original thread

Hi, I can use a little help with integrating jQuery form validation with transloadit plugin. I’m trying to initiate file upload with submitHandler but unsuccessfully. Here is my validation code:

' $().ready(function() {
    $("#entryForm").validate({
        rules: {
            first_name: "required"
        },
        messages: {
            first_name: "Please enter your first name"
        }
    
    });
}); '
2

Here is the code I’m testing out. After the form is being validated it triggers form submission via ‘click’ event but the file upload fails to complete.

’

$(document).ready(function () {
    $('#entryForm').transloadit({
                wait: true,
                autoSubmit: true,
                onError: function(assembly) {
                    alert(assembly.error+': '+assembly.message);
                  }
            });
    
      //setup validation on entryForm
      $("#entryForm").validate({
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Please enter a valid email address"
        }
    
    });
    
    $("#submit").click(function() {
      if ($("#entryForm").valid() ) {
        $("#entryForm").submit();
      }
    });
});

      <form id="entryForm" action="http://api2.transloadit.com/assemblies" enctype="multipart/form-data" method="POST" class="cmxform">
          First Name: <input name="first_name" type="text" class="long" /><br />
          <input type="file" name="my_file" id="file" /><br />
          <input type="image" name="submit" id="submit" src="img/btn_submit.jpg" />
          <input type="hidden" name="params" value="{myparameters}" />
      </form>

’

I’ve tested the form without the validation part and it works fine so my problem is with triggering file upload after validation.

3

Can you try to return false from your click handler if the validation fails? That should cancel the underlaying event.

You should also add the click listener before setting up the transloadit form I think.

4

Thank you very much for your reply. I’m anxious to resolve this code issue so the site can go into production. I tried to implement your suggestions but doesn’t seem to make a difference. Can you take a look at my latest code (attached) to see if you have any other suggestions. The problem I’m having is that upload actually goes through but the redirect doesn’t work. Testing it without validation in place seems to work fine. Thanks!

5

I don’t see any params in your example, did you remove them?

6

Yes, but this one has them. I just replaced my domain name with a fake one.

7

Sorry, but it’s really difficult for me to help you this way. The code you send doesn’t seem to be doing anything, and lots of files are missing. Check the attached screenshot.

The problem I’m having is that upload actually goes through but the redirect doesn’t work. Testing it without validation in place seems to work fine. Thanks!

Can you explain this further? Maybe I can help if I understand your problem better.

--fg

8

I’m attaching the missing files so the code should run fine now. After file upload finishes the redirect is not working. Thanks again for helping me to figure it out.

9

Okay I debugged your problem and could reproduce it. Unfortunately I don’t have a solution yet and need to look further. I have an appointment now though so this needs to wait until tomorrow - sorry. : |

I will let you know once I have a solution.

Kind regards,
Tim

10

I think I figured it out. My image (used as a button with a ‘click’ event) had id=“submit” which was conflicting with jQuery. Once I renamed the id for the image everything seems to work fine.

11

Alright I too spent a lot of time figuring this out, debugging our plugin. Here is a nother version that works without renaming the image id:

` <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Official Rules

Email Address*

Select your submission

`

Kind regards,
Tim

12

Hmm somehow ate my code.

`

$(document).ready(function () {
    jQuery.validator.addMethod("accept", function(value, element, param) {
          return value.match(new RegExp("." + param + "$"));
        });
    
          $("#entryForm").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            my_file: {
                required: true,
                accept: "(jpe?g|gif|png|avi|dv|h264|mpeg2|mpeg4|mov|wmv)"
            }
        },
        messages: {
            email: "Please enter a valid email address",
            my_file: "You must select a file in one of the following formats: .AVI; .DV; h.264; .MPEG2; .MPEG4; Quicktime; or .WMV"
        }
    
    });
    
    $('#submit').click(function() {
        if ($('#entryForm').valid()) {
            $('#entryForm').trigger('submit.transloadit');
            $('#alternateSubmit').click();
        }
    });
    
    $('#entryForm').transloadit({
        wait: true,
        autoSubmit: true
    });
}); `

And then add this to your markup:

Kind regards,
Tim

13

Tim, thank you for your help. I will test it out.

14

Closing this for now.

Please reopen it if you need further help.