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

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

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

Answer 2

除非您实施在发布到服务器之前验证的客户端库，否则您将永远无法获得所需的结果。那里有几个图书馆。

https://github.com/DiegoLopesLima/Validate

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

jQuery('form').validate();

它似乎是一个相当全面的图书馆。祝你好运。

Answer 3

我已经编写了一个插件，可用于为Gravity Forms启用jQuery验证。您可以在此处查看演示。 https://demos.dnesscarkey.com/jquery-validation-for-gravity-forms/

谢谢

Answer 4

当你说没有任何验证时，你的意思是你打开所需的字段而只是重新加载页面而不显示验证错误？

使用新的Woocommerce 2.0.X，验证消息在Gravity Forms中被破坏。我有Woocommerce 1.X.X和Gravity Forms，他们工作得很好。自升级Woocommerce以来，不再显示验证消息。表单未提交，它只是重新加载页面而没有任何指示正在发生的事情。我在Gravity Forms论坛上发布了一个帖子，他们确定它是Woocommerce，我在旧网站上做了一些测试，这些旧版本都有旧版本的两个插件，我同意，它是Woocommerce，而不是Gravity Forms。耶，Woocommerce！

Answer 5

此链接可能对您有所帮助： 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 6

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

遇到同样的问题，我使用jquerv validation插件和以下代码段解决了这个问题

在你的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)

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

Wordpress - Gravity Forms - 如何启用JavaScript验证？

6 个答案: