Wordpress - 重力形式 - 如何启用 JavaScript 验证？

Question

有人知道如何在 Gravity 表单中启用 JS 验证吗？

我已将我的 3 个字段中的每一个都标记为“必填”，但是当我提交一个空表单时，仍然有不必要的访问服务器，因为客户端似乎没有执行 JavaScript 验证。

这是我尝试过的简码：

    [gravityform id="1" title="false" description="true" ajax="true"]
[gravityform id="1" title="false" description="true" ajax="false"]

我已经四处搜索，但在任何地方都找不到任何信息。任何帮助将不胜感激。

Answer 1

我编写了一个插件，您可以使用它来启用重力表单的 jQuery 验证。你可以在这里查看演示。 https://demos.dnesscarkey.com/jquery-validation-for-gravity-forms/

谢谢

Answer 2

如前所述，Gravity Forms 似乎不处理开箱即用的前端验证

遇到了同样的问题，我使用jquerv validation插件和以下代码sn-p解决了它

---

在你的functions.php文件中

add_action('gform_pre_enqueue_scripts',function(){
    wp_enqueue_script('jquery-validate','https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js', ['jquery'], );
});

然后在您的自定义 javascript 文件中（如果您还没有，则必须创建一个并将其加入队列）

(function($) {

  /**
   * Checks if the jquery-validate library is loaded
   */
  if ( !$.validator instanceof Function) {
    return;
  }

  $('form[id*=gform_]').each(function() {
    var validationOptions = {
      rules: {},
    };
    $(this).find('.gfield_contains_required input').each(function(i) {

      var ruleName = $(this).attr('name');

      if (validationOptions.rules.hasOwnProperty(ruleName)) {
        return;
      }

      validationOptions.rules[ruleName] = {
        required: true,
      };
    });
    if (Object.keys(validationOptions.rules).length > 0) {
      $(this).validate(validationOptions);
    }
  });
})(jQuery)

这将搜索每个重力表单元素，并为表单创建者上已标记为必填的字段设置所需规则

Answer 3

此链接可能对您有所帮助： enter link description here

或者你可以在把这段代码放到你的function.php中之后试试这个

<?php function comment_validation_init() {
if(is_page(14))
{
    ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#gform_1').validate({

    rules: {
      input_1: {
        required: true,
      },input_6: {
        required: true,
        email: true
      },

      input_3: {
        required: true,
      }
    },


    errorElement: "div",
    errorPlacement: function(error, element) {
      element.before(error);
    }

    });
    });
    </script>
    <?php
}}add_action('wp_footer', 'comment_validation_init');?>

Answer 4

当您说没有任何验证时，您的意思是您将必填字段保持打开状态，它只是重新加载页面而不显示验证错误？

使用新的 Woocommerce 2.0.X，验证消息在 Gravity Forms 中被破坏。我有 Woocommerce 1.X.X 和 Gravity Forms，它们运行良好。由于升级 Woocommerce 验证消息不再显示。表单没有提交，它只是重新加载页面，没有任何迹象表明发生了什么。我在 Gravity Forms 论坛上发布了一个帖子，他们确定它是 Woocommerce，我在一个旧网站上做了一些测试，该网站有两个插件的旧版本，我同意，它是 Woocommerce，而不是 Gravity Forms。是的，Woocommerce！

Answer 5

除非您实现一个在发布到服务器之前进行验证的客户端库，否则您永远不会得到您正在寻找的结果。那里有几个图书馆。

https://github.com/DiegoLopesLima/Validate

根据文档，您可以使用必需的标签标记表单字段输入。它还支持其他几种验证类型。然后，在您发布之前，验证您的整个表单：

jQuery('form').validate();

这似乎是一个相当全面的库。祝你好运。

Answer 6

AFAIK，您无法启用它，您必须从编辑页面将类应用于表单字段并编写您自己的 JS 进行验证，或者使用 validation 库。

注意：我使用 GF 快 6 个月了，我不知道他们的新版本是否支持前端验证