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?

  • How/Where are you adding the validate code? – czerspalace May 27 '15 at 22:58
  • @czerspalace the validation code is in the template file – crthompson May 28 '15 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? – czerspalace May 28 '15 at 5:47
  • put the code in functions.php as I've mentioned in my answer. – sakibmoon May 28 '15 at 9:11
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)

| improve this answer | |
  • Are you parenthesis off? – crthompson May 27 '15 at 22:17
  • Yes, they are. You need an opening paren in front of function – crthompson May 27 '15 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 '15 at 22:27
  • Putting that code in my functions.php file stopped my site from loading completely. – crthompson May 28 '15 at 15:13
  • @paqogomez See my edit. – sakibmoon May 28 '15 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.