JQuery Validation Plugin: Prevent validation issue on nested form
- by Majid
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
Submit event bubbles up to the outer form
As we have validation on that form, validation is triggered,
Validation tries to find the form triggering it,
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?
