JQuery 验证插件：防止嵌套表单上的验证问题

Question

我有一个使用验证的表单。该表格有一个用于照片上传的部分。最初，此部分包含六个元素，代码如下：

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

我已将一个函数绑定到 photo_upload 类的单击事件。此函数使用以下代码将图像替换为最小形式： 复制代码

<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>

因此，本质上，单击图像后，我将在原始的经过验证的表单中嵌套一个新表单。现在，当我使用这个新表单并上传图像时，我收到一条错误（重复三次）：

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

这是怎么回事？我的猜测是这个

1. 提交事件冒泡到外部表单
2. 当我们对该表单进行验证时，验证被触发，
3. 验证尝试找到触发它的表单，
4. 因为我们没有将验证绑定到内部表单，所以它

现在返回“未定义”，我的评估正确吗？不管是与否，我该如何解决这个问题？

Answer 1

HTML 中不允许嵌套表单。您需要使用带有两个提交按钮的单个表单，并设置服务器端表单处理程序，以便它识别哪个按钮是
使用并相应地分支。

Answer 2

如果您不想更改页面结构，可以通过修补事件处理函数 delegate 来修复此错误。

jquery.validate.js v1.15.0，第 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 );
    }
}

我的修补版本：

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 );
        }
    }
}

修补缩小版本（jquery.validate.js 被打包以使用 grunt 和 uglify 进行分发）更困难，但并非不可能。 function delegate(event) 变为 function b(b)。

另一种方法是修补绑定delegate时使用的选择器。我认为这是一个更复杂的修复，但浏览器性能会稍微好一些。