JQuery Validation Plugin：防止嵌套表单上的验证问题

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>

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

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

这里发生了什么？我的猜测是这样的

1. 将事件气泡提交到外部表单
2. 由于我们对该表单进行了验证，因此会触发验证，
3. 验证试图找到触发它的表单，
4. 由于我们没有将验证绑定到内部表单，它返回“未定义”

现在，我的评估是否正确？不管是不是，我该如何解决这个问题？

Answer 1

Nested forms are not allowed in 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 被打包以使用带有 uglify 的 grunt 进行分发）更难但并非不可能。 function delegate(event) 变为 function b(b)。

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