0

这是我在此的头一篇博文。我一直在寻找这个问题的答案一段时间，并查看了几篇文章以尝试理解语法。不幸的是，我无法让它工作。

我有一个文件上传表单，我将以下脚本与jquery 表单插件结合使用来在文件上传期间修改我的状态栏。

<script>
(function() {    
    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');
    $('#create_playlist').ajaxForm({
        uploadProgress: function(event, position, total, percentComplete) {
            if (percentComplete == 100) {
                status.html('Processing <img src="../images/loader.gif" />');
            } else {
                status.html('Uploading...');
            }
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html('Done! <img src="../images/success.png" />');
            window.location.reload(true);
    //      status.html(xhr.responseText);
        }
    }); 
})();
</script>

我还使用同一页面的以下脚本使用jquery validate 插件来验证我的表单。

<script type="text/javascript">
$(document).ready(function(){
$("#create_playlist").validate({
            rules: {

                    newfile: {
                            required: true,
                            accept: "text/plain" 
                    },

            },

            errorElement: "span",   
            errorPlacement: function(error, element) {
            error.insertAfter(element);
            },   


            submitHandler: function(form) {
                form.submit();
            }
    });
});
</script>

这两个脚本都可以独立运行。但是，如果第二个脚本显示验证错误，它当前不会阻止第一个脚本运行。

我想做的是仅在第二个脚本中的验证成功时才调用第一个脚本。我认为应该调用第一个脚本而不是“form.submit();” 在第二个脚本的以下代码中。

submitHandler: function(form) {             
    form.submit();
}

在尝试将第一个脚本放在第二个脚本的脚本处理程序中或将第一个脚本作为函数调用后，我仍然没有成功。对此的任何帮助将不胜感激。

4

2 回答 2

0

根据jQuery Validate 文档：

submitHandler（默认：原生表单提交）：

类型：函数（）

表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

jQuery :

$(document).ready(function(){
    $("#create_playlist").validate({
            rules: {
                newfile: {
                    required: true,
                    accept: "text/plain" 
                }
            },
            errorElement: "span",   
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },   
            submitHandler: function(form) {
                //form.submit(); <-- remove this... it's redundant because the plugin will submit when valid
                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');
                form.ajaxForm({
                    // your ajaxForm code here
                });
                return false;
            }
    });
});
于 2013-06-13T21:09:52.183 回答
-1

据我所知，您错过了一个return false;事件，以防止表单提交。您需要一个条件语句来验证第一个函数的功能，如果是，则调用第二个 else 显示一条消息并返回 false。

于 2013-06-13T13:54:26.660 回答