2

I am attempting to load jquery's validate methods in my template file.

The idea is to be able to run something like this:

$jquery("#generateForm").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    },
    rules: {
                ...
        }
    },
     messages: {
                  ...
        }
    }
});     

Based on several posts, I've put this in my header.php file:

<?php

    function add_my_js_files(){
        wp_enqueue_script('jquery-validate-min', 
                          get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                          array( 'jquery' )  ) );
    }
    add_action('wp_enqueue_scripts', "add_my_js_files");

I have also tried to just link the file:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js" 
        type="text/javascript">
</script>

In both cases the error I get is:

Uncaught ReferenceError: jQuery is not defined

In the jquery.validate.min.js file.

This appears to be because of the noConflict param that wordpress uses while loading jquery, but I cannot seem to figure out how to get around it.

How do i load this validate file?

4
  • How/Where are you adding the validate code? May 27, 2015 at 22:58
  • @czerspalace the validation code is in the template file
    – crthompson
    May 28, 2015 at 3:28
  • What if you move the add_my_js_files and the add_action( 'wp_enqueue_scripts', 'add_my_js_files') into your functions.php? May 28, 2015 at 5:47
  • put the code in functions.php as I've mentioned in my answer.
    – sakibmoon
    May 28, 2015 at 9:11

1 Answer 1

2

Yes. You're right. It's because of the jQuery noConflict mode.

You need to use jQuery instead of $. Or you can wrap everything in a function like this to define it's scope

(function($){
    $("#generateForm").validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit();
        },
        rules: {
                ...
            }
        },
        messages: {
                ...
            }
        }
    });
})(jQuery);

Based on several posts, I've put this in my header.php file:

Not in header.php. Put this code in your functions.php file.

function add_my_js_files(){
    wp_enqueue_script('jquery-validate-min', 
                      get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                      array( 'jquery' ) 
                     );
}
add_action('wp_enqueue_scripts', "add_my_js_files");

(There was an extra parentheses. I've removed that)

6
  • Are you parenthesis off?
    – crthompson
    May 27, 2015 at 22:17
  • Yes, they are. You need an opening paren in front of function
    – crthompson
    May 27, 2015 at 22:26
  • This still doesnt work however. I get the error Uncaught TypeError: undefined is not a function. Referring to the .validate method.
    – crthompson
    May 27, 2015 at 22:27
  • Putting that code in my functions.php file stopped my site from loading completely.
    – crthompson
    May 28, 2015 at 15:13
  • @paqogomez See my edit.
    – sakibmoon
    May 28, 2015 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.