JQuery Validation Plugin: Prevent validation issue on nested form

Question

I have a form on which I use validation. This form has a section for photo upload. Initially this section contains six elements with the following code:

<img class="photo_upload" src="image/app/photo_upload.jpg">

I have bound a function to the click event for the class of photo_upload. This function replaces the image with a minimal form with this code: Copy code

<form onsubmit="startUploadImage();" target="control_target"
enctype="multipart/form-data" method="post" action="index.php">
<input type="hidden" value="add_image" name="service">
<input type="hidden" value="1000000" name="MAX_FILE_SIZE">
<input type="file" size="10" name="photo" id="photo_file_upload"><br>
<button onclick="javascript:cancel_photo_upload();return false;">Cancel</button>
</form>

So, essentially, after the image is clicked, I'd have a new form nested in my original, validated form. Now, when I use this new form and upload an image, I receive an error (repeated three times) saying:

validator is undefined
http://host.com/path/index.php
Line 286

What is going on here? My guess is this

1. Submit event bubbles up to the outer form
2. As we have validation on that form, validation is triggered,
3. Validation tries to find the form triggering it,
4. Since we have not bound validation to the inner form it returns 'undefined'

Now, is my assessment correct? Whether it is or not, how can I solve this issue?

Answer 1

Nested forms are not allowed in HTML. You need to use a single form with two submit buttons and to set up the server-side form handler so that it recognizes which button was used and branches accordingly.