jQuery 验证引擎答案

【问题标题】：jQuery validationEnginejQuery 验证引擎
【发布时间】：2011-03-05 17:24:13
【问题描述】：

我完全是 jQuery 和 js 的菜鸟，我确信有一个比我想出的更优雅的解决方案 - 但这是我到目前为止所拥有的，我很难过。

由于各种原因，我有一个表单需要很长时间才能提交 - 我正在使用 validationEngine 来验证内联表单字段，效果很好。然后我需要添加一个弹出 div 来告诉访问者请耐心等待应用程序执行请求的搜索的原因。

我的原始解决方案效果很好，无论表单是否完全填写，当访问者单击提交时都会显示弹出 div - 如果表单已完全填写，一切都按预期工作 - 如果他们错过了字段验证引擎显示缺少的字段通知，我的弹出 div 仍然显示，但显然表单没有提交。这段代码会发生这种情况：

jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
});

    $(document).ready(function() {
        $('#approvalForm').submit(function() {
            $('#progress').show();
            });
        });

所以经过一些研究，我做了一些修改，得到了这段代码：

    jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach', {
        onValidationComplete: function(form, status){
        if (status == true) {
            $('#approvalForm').submit(function() {
                    $('#progress').show();
                });
        }
             }
     });
});

现在一切正常，除了你必须点击提交按钮两次，当你这样做时弹出 div 出现但表单没有提交。

【问题讨论】：

您是否碰巧在某个地方有当前版本在线？另外 - 请注意，如果您将 submit 处理程序附加到表单，您必须手动阻止默认事件（提交表单），例如通过在处理程序函数的末尾返回false。 [我快速浏览了插件的来源（我不知道），看起来（不要引用我的话）他们会先传递状态，然后传递表单（在 2.0 beta 版中） ?]
当前版本在这里haloadvance.com/testsite - 但它是您提交此表单后的表单。 - 如果有帮助，我可以提供页面的完整代码。

标签： jquery jquery-validation-engine

【解决方案1】：

$('#form1').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status == true) {                   
            startProgressBar();
            form.validationEngine('detach');
            form.submit();

        }
    }           
});

【讨论】：

【解决方案2】：

jQuery("#approvalForm").validationEngine('attach', {
    onValidationComplete: function(form, status){
    if (status == true) {
        $('#progress').show();
        $('#approvalForm').trigger('submit');
    }else{
        $('#progress').hide();
    }
}

但我认为如果你想显示加载弹出窗口，
你必须使用 jQuery.ajax

它具有 beforeSend 功能，将在浏览器发送请求之前运行。

【讨论】：

【解决方案3】：

onValidationComplete 停止表单提交，让您自己处理事情。在这种情况下，您要做的就是在验证通过时显示加载弹出窗口。因此，您可以做的是挂钩到验证的结果，如果它通过了，则显示加载弹出窗口。然后表单提交将正常激活。

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
    jQuery("#approvalForm").bind("jqv.form.result", function(event, errorFound) {
        if(!errorFound) $('#progress').show();
    })
});
</script>

【讨论】：

【解决方案4】：

你需要

$('#approvalForm').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status) {                   
            startProgressBar();
            YouFunctionPreLoad();
            return true;
            //form.submit();
        }
    }           
});

【讨论】：