JQuery Validation Plugin: Prevent validation issue on nested form

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 h开发者_开发技巧ave 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?

---

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.

---

If you don't want to alter your page structure, you can fix this error by patching the event handling function delegate.

jquery.validate.js v1.15.0, lines 401 - 408:

function delegate( event ) {
    var validator = $.data( this.form, "validator" ),
        eventType = "on" + event.type.replace( /^validate/, "" ),
        settings = validator.settings;
    if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
        settings[ eventType ].call( validator, this, event );
    }
}

My patched version:

function delegate( event ) {
    if (this.form === event.delegateTarget) {
        var validator = $.data( this.form, "validator" ),
            eventType = "on" + event.type.replace( /^validate/, "" ),
            settings = validator.settings;
        if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
            settings[ eventType ].call( validator, this, event );
        }
    }
}

Patching the minified version (jquery.validate.js is packaged for distribution using grunt with uglify) is harder but not impossible. function delegate(event) becomes function b(b).

An alternative approach would be to patch the selector used when binding delegate. I consider that a more complex fix, but browser performance would be marginally better.