JS code won't work unless Jquery is in the footer

Question

I couldn't solve this problem because it involves more than just moving Jquery to footer. At the top of my WP theme has a form that I intend to send within the same page using JavaScript. I put the code in the footer because it won't work in the header. The problem is I'm loading Jquery in the header because I have another function at the top of the page and widgets that require Jquery to load first. So I can't move Jquery to bottom.

But the problematic <script> I'm using to send the form won't work UNLESS Jquery is in the footer before it, and I don't know why.

The form:

<form action="" id="form1" name="form1" method="post">
     <p>
         <input name="name" type="text" class="form-textfield-header" id="textfield1" placeholder="Name"></p>
      <p>
         <input name="company" type="text" class="form-textfield-header" id="textfield2" placeholder="Company"></p>
         <p>
         <input name="url" type="text" class="form-textfield-header" id="textfield3" placeholder="Site url"></p>
         <p>
             <input name="email" type="email" class="form-textfield-header" id="email" placeholder="Email"></p>
      <p>
             <textarea name="details" class="form-textarea-header" id="textarea" placeholder="Project details"></textarea></p>
      <p>
             <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-secondary"></p>

       </form>

The function:

<!-- Send form -->
<script>
$(function() {

    var theForm = $("#form1");

    theForm.validate({

    submitHandler: function(theForm) {

    $('#loader', theForm).html('Please Wait...');

    $.ajax({
    type: "POST",
    url: "<?php echo get_template_directory_uri(); ?>/send.php",
    data: $(theForm).serialize(),
    timeout: 20000,

        success: function(msg) { $(theForm).fadeOut((500, function(){ 

                    $(theForm).html("<h2 class='messagesent'>Thank you. We will contact you shortly.</h2>").fadeIn(); 

                    }));
                },

                error: $('.thanks').show()

            });

            return false;
        }
    });
});
</script>

Answer 1

将$(function() {替换$(function() { jQuery(function($) { 。可能在$存在冲突