Question

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

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

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

<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

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

将事件气泡提交到外部表格
由于我们已对该表单进行验证，因此会触发验证，
验证尝试找到触发它的表单，
由于我们没有将验证绑定到内部表单，因此返回'undefined'

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

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时使用的选择器。我认为这是一个更复杂的修复，但浏览器性能稍微好一些。

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

2 个答案: