How to include jquery validate in a template

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