【发布时间】：2010-10-21 08:54:01
【问题描述】：
我想在同一个表单上使用这两个 JQuery 插件：
- JQuery 验证插件：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- JQuery 上传进度：http://github.com/drogus/jquery-upload-progress
我想要的行为：
- 使用验证插件验证表单
- 如果没有错误启动上传和uploadProgress 插件。如果出现错误，请显示它们并且不要启动 uploadProgress 插件。
这两个插件分别工作得很好。当我将两者都应用在同一张表格上时，如果一切都正确，它会很好地工作。当表单中有错误时，uploadProgress 会启动（启动和上传功能运行）但实际上传不会。它显示了一个永远不会改变的上传栏，因为没有提交表单。
我认为问题出在这两个插件在按下提交按钮时注册了一些要执行的东西。
这是我的JavaScript（在第一个答案后更新，但问题仍然存在）：
/* ---------------------------------
* Parameters for the form validator
* --------------------------------- */
$.validator.setDefaults({
highlight: function(input) {
$(input).addClass("highlight");
},
unhighlight: function(input) {
$(input).removeClass("highlight");
}
});
$(document).ready(function(){
/* ----------------------
* Validator registration
* ---------------------- */
$("#upload_form").validate({
rules: {
title: {
required: true,
minlength: 5,
maxlength: 100
},
file: {
required: true,
accept: 'ogg|ogv|avi|mpe?g|mov|wmv|flv|mp4'
}
},
messages: {
title: {
required: "Please enter a title for the video",
minlength: jQuery.format("The title must be at least {0} characters long"),
maxlength: jQuery.format("The title must be shorter than {0} characters")
},
file: {
required: "Please choose a video file to upload",
accept: "Please choose a valid video file (ogg, ogv, avi, mpg, mpeg, mov, flv, mp4)"
}
}
});
/* ---------------
* Upload progress
* --------------- */
$('#upload_form').uploadProgress({
/* scripts locations for safari */
jqueryPath: "{{MEDIA_URL|default:'/media/'}}js/jquery.uploadProgress.js",
uploadProgressPath: "{{MEDIA_URL|default:'/media/'}}js/jquery.uploadProgress.js",
/* selector or element that will be updated */
progressBar: "#progress_indicator",
/* progress reports url */
progressUrl: '/upload/progress/',
/* function called just before starting the upload */
start: function() {
$("#upload_form").hide();
filename = $("#id_file").val().split(/[\/\\]/).pop();
fmts = gettext("Uploading %(filename)s...");
dat = {
filename: filename
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
$("#progress_container").show();
},
/* function called each time bar is updated */
uploading: function(upload) {
if (upload.percents >= 100) {
window.clearTimeout(this.timer);
fmts = gettext("Saving %(filename)s...");
dat = {
filename: filename
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
} else {
fmts = gettext("Uploading %(filename)s : %(percents)s%...");
dat = {
filename: filename,
percents: upload.percents
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
}
},
/* how often will bar be updated */
interval: 1000
});
});
以及相关的HTML：
<form id="upload_form" action="/upload/" method="post" enctype="multipart/form-data">
<label for="id_title">Title</label>: <input id="id_title" type="text" name="title"/>
<br/>
<label for="id_description">Description</label>: <input id="id_description" type="text" name="description" />
<br/>
<label for="id_file">File</label>: <input type="file" name="file" id="id_file" />
</div>
<div>
<!-- <button type="submit" class="accept" >Submit</button> -->
<input type="submit" value="Submit" />
</div>
</form>
<div id="progress_container">
<div id="progress_filename"></div>
<div id="progress_bar">
<div id="progress_indicator"></div>
</div>
</div>
注意：progress_container div 在页面加载时通过 CSS 隐藏。
我对该问题的临时解决方法是在提交时停用验证并仅使用其他事件，但我也想在提交时进行验证。
【问题讨论】：
标签： jquery jquery-plugins jquery-validate