Does anyone know how I can enable JS validation in a Gravity form?

I have marked each of my 3 fields as 'required', but when I submit an empty form, there is still an unnecessary trip to the server because it would seem no JavaScript validation is being performed clientside.

Here's the shortcodes I've tried:

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

I have searched around but cannot find any info anywhere on this. Any help would be much appreciated.

Does anyone know how I can enable JS validation in a Gravity form?

I have marked each of my 3 fields as 'required', but when I submit an empty form, there is still an unnecessary trip to the server because it would seem no JavaScript validation is being performed clientside.

Here's the shortcodes I've tried:

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

I have searched around but cannot find any info anywhere on this. Any help would be much appreciated.

• javascript
• wordpress
• forms
• validation
• gravity

Share Improve this question Follow asked Mar 9, 2013 at 14:29 Boycott A.I.Boycott A.I. 19k3030 gold badges181181 silver badges263263 bronze badges 1

• I use the Contact Form 7 plugin now. – Boycott A.I. Commented Oct 16, 2014 at 11:24

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

AFAIK, you can't enable it, you'll have to apply classes to the form fields from the edit page and write your own JS for the validation OR use the validation library.

Note: I used GF almost 6 months back, I don't know if their new version supports front end validation

Unless you implement a client-side library that validates BEFORE you post to the server, you'll never get the results that you are looking for. There are several libraries out there.

https://github./DiegoLopesLima/Validate

According to the docs, you can mark your form field inputs with a required tag. It also supports several other validation types. Then, before you post, validate your entire form:

jQuery('form').validate();

It seems like a fairly prehensive library. Best of luck.

As mentioned previously, it seems as though Gravity Forms does not handle frontend validation out of the box

Encountered the same issue and I resolved it using the jquerv validation plugin and the the following code snippet

---

in your functions.php file

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

then in your custom javascript file (you will have to create and enqueue one if you don't already have one)

(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)

This will search each gravity form element and set the required rules for fields that have been marked as required on the form creator

I have written a plugin you can use to enable jQuery validation for Gravity Forms. You can check the demo here. [Removed dead link]

Thanks

When you say there isn't any validation do you mean you leave required fields open and it just reloads the page without showing the validation errors?

With the new Woomerce 2.0.X, validation messages are broken in Gravity Forms. I had Woomerce 1.X.X and Gravity Forms and they worked fine. Since upgrading Woomerce the validation message is no longer shown. The form is not submitted, it just reloads the page without any indication of what is going on. I've posted a thread in Gravity Forms forum and they determined it's Woomerce and I did some testing on an old site that had older versions of both plugins and I agree, it's Woomerce, not Gravity Forms. Yay, Woomerce!

this link may helpful to you: enter link description here

or you may try this after putting this code in your function.php

<?php function ment_validation_init() {
if(is_page(14))
{
    ?>
    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn./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', 'ment_validation_init');?>