2010-06-05 101 views
2

我有一个表单,我使用验证。此表单有一个照片上传部分。最初,这部分包含六个元素用下面的代码:JQuery验证插件:防止嵌套形式的验证问题

<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 

这到底是怎么回事?我的猜测是这

  1. 提交事件冒泡到外形式
  2. 因为我们有形式验证,验证被触发,
  3. 验证试图找到形式触发它,
  4. 因为我们没有绑定验证到内部表单返回'undefined'

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

回答

1

如果你不想改变你的页面结构,可以通过打补丁的事件处理函数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当选择使用。我认为这是一个更复杂的修复方法,但浏览器的性能会稍好一些。

+0

最后,为了解决这个错误,而无需修改jquery.validate.js或你的页面结构,应用验证的内部形式与空规则集,这样有望在委托对象都存在,但没有任何规则表单上的影响应该无。 – Emyr 2016-08-02 17:30:10