How to include jquery validate in a template

by

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="https://wordpress.stackexchange.com/questions/189636/<?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?

1 Answer
1

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)

Leave a Comment