如何使用 Jquery 验证引擎实现 onSuccess()？答案

【问题标题】：How to Implement onSuccess() using Jquery Validation Engine?如何使用 Jquery 验证引擎实现 onSuccess()？
【发布时间】：2012-07-31 04:32:07
【问题描述】：

我正在使用 Jquery Validation Engine http://posabsolute.github.com/jQuery-Validation-Engine/，我只想显示一个隐藏的加载 gif 一旦发现表单有效。

即

用户提交表单
如果表单有效： $('#lulus-loading-div').show();

我试过这个，但没有运气：

Jquery and jQuery-Validation-Engine

我似乎没有运气实现 onSuccess() 回调函数。

我不怀疑它可以很好地工作，不幸的是我不知道正确的语法，并且对文档没有运气：/

目前我有：

jQuery(document).ready(function(){
        jQuery("#model-form").validationEngine({

           onSuccess: function(){
              $('#lulus-loading-div').show();
           });
        });

 });

这会在单个字段第一次验证时调用 onSuccess()，然后如果您尝试提交不完整的表单，它会在不标记错误的情况下提交。

任何帮助或建议将不胜感激:)

如果您需要更多详细信息，请告诉我。

【问题讨论】：

标签的类属性是什么样的？它看起来像？
您可能不想使用 javascript 实现占位符文本，而只需在输入字段上使用 HTML5 'placeholder' 属性。您可以编辑您的问题以提高可读性。不要在 cmets 中放置太多代码。请使用格式更好的文本更新您的问题。谢谢。
不同的类取决于输入。电子邮件：class="validate[required,custom[email]] text-input" 文本使用 checkRequired()：class="validate[required,funcCall[checkRequired]] text-input"，文件使用与您提到的类似的类：class="validate[required,funcCall[checkRequired]] text-input"。我使用 js 作为占位符，因为它适合在这种情况下向后兼容，尽管我认为这可能有点偏离主题。表格可以在这里找到：lulusmodels.com.au/model-form

标签： jquery jquery-plugins validation

【解决方案1】：

验证引擎没有任何东西（工作）来完成这样的任务。

假设您的表单使用页面重新加载 - 但也应该与基于 ajax 的无重新加载提交一起使用。

有一次我需要类似的东西，我写了一个快速'n'dirty hack，它就是这样做的。

我使用的是 2.5.2 版本

找到这段代码（大约第 240-250 行）

form.trigger("jqv.form.result", [errorFound]);

就在它添加这段代码之前：

if (options.jpAfterSuccessValidation && !errorFound) { options.jpAfterSuccessValidation(); }

在最底部，默认情况下，附加到（add after）“fadeDuration”

褪色持续时间：0.3， jpAfterSuccessValidation: false //如果所有字段都验证，则启动回调

并像这样使用它：

jQuery("#model-form").validationEngine({ jpAfterSuccessValidation：函数（）{ $('#lulus-loading-div').show(); //这将拉出你的信息对话框 } });

您的“lulus-loading-div”将保持可见，直到包含表单的页面重新加载（并提交表单）。

【讨论】：

感谢您的回答@Jeffz。虽然当我实现您提供的代码时，它不起作用（版本 2.5.3） - 但是它导致我自己快速'n'脏，只是添加： if (!errorFound) { $ ('#lulus-loading-div').show(); } 到您建议添加代码的位置（就在 form.trigger 行之前）。

【解决方案2】：

onSuccess 错误也报告在他们的 Git 上。以下是从 https://github.com/posabsolute/jQuery-Validation-Engine/issues/554 获取的关于 snnipet 的工作：

$("#my_form").validationEngine('attach', { 
    onValidationComplete: function(form, status){ // when validate is on and the form scan is completed
        if (status == true) { // equiv to success everythings is OK
            // we disable the default from action to make our own action like alert or other function
            form.on('submit', function(e) {
                e.preventDefault();
            });

            // your function or your action

            alert("Successful! Now submitting");
            return true;
        } else {
            // we disable the default from action to make our own action like alert or other function
            form.on('submit', function(e) {
                e.preventDefault();
            });

            // your function or your action

            alert("Errors! Stopping Here");
        }
    },
    promptPosition : "topLeft", 
    scroll: false
});

希望，它可以帮助某人！！！

【讨论】：

【解决方案3】：

“快速'n'clean 解决方案就是这样做：

$("#new_user").validationEngine("attach", {
  promptPosition: "topLeft",
  onFieldSuccess: function() {
    alert("rakoto");
  }
});

希望有所帮助。 ;)

【讨论】：