Question

我是jQuery和js的总菜鸟，我确信有一个更优雅的解决方案，然后我想出了 - 但这是我到目前为止，我很难过。

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

我的原始解决方案很好地接受弹出式div显示访问者点击提交时无论表单是否已完全填写 - 表单已完全填写，所有内容都按预期工作 - 如果他们错过了字段validationEngine显示缺少的字段通知，我的弹出式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时，表单不会提交。

Answer 1

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

        }
    }           
});

Answer 2

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

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

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

Answer 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>

Answer 4

你需要

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

jQuery validationEngine

4 个答案: