Question

这是我在这里的第一篇文章。我一直在寻找这个问题的答案，并且已经查看了几个帖子以便尝试理解语法。不幸的是，我无法让它发挥作用。

我有一个文件上传表单，我正在使用以下脚本与jquery form plugin一起修改文件上传期间的状态栏。

<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 plugin验证我的表单。

<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();
}

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

Answer 1

根据jQuery Validate documentation：

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;
            }
    });
});

Answer 2

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

仅在表单验证成功时调用jquery upload函数

2 个答案: