Calling JavaScript file with Custom Plugin

Question

So, the goal is to use jQuery Validation for a custom form. Maybe I'm going about this the hard way. But, here's what I'm doing:

1. Uploaded the jQuery Validation file to my theme folder
2. Created plug-in folder in plug-in's file

3. Added php file with this code:

   function custom_validation() {
   
   wp_enqueue_script('jquery');
   
   wp_register_script( 'jq-validation', get_template_directory_uri() . '/jquery.validation/jquery.validation.js', array('jquery'),'1',false );
   
   wp_enqueue_script( 'jq-validation' );
   
   }
   
   add_action( 'wp_enqueue_scripts', 'custom_validation' );
   

And, it's not working. I'm trying to avoid adding:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

To the header file. But, it works whenever I do that.

Any help is appreciated.

Answer 1

WP loads jQuery in no conflict mode so shortcut $ is not available for jQuery to use .You should not use the $ variable for jQuery within WordPress.

jQuery(function ($) {
   //code here
})

or

(function($){

    //code here

})(jQuery);

There are so many Q&A which refers to the same conflict issue.Check this and this.