Q: How do I correct the error uncaught typeError validator is undefined and prevent my form from post if error Here is my situation.
Part 1: I press a link on my Index View.cshtml to pop my modal AddContact.cshtml (below) in debug mode jquery is throwing the following error "typeError Validator not defined" if I type anything into a textbox or try to use the dropdown.


Note my Index View has a layout _Layout.cshtml which have the script bundles:
@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

But, when I built my partial View AddContact.cshtml ... I don't use a layout _Layout.cshtml, is this why I am getting the typeError validator?
So, that I believe is the big question, How do I fix the typeError?
Part 2, Before I realize the error in Part 1, I added $.validate() to my javascript below It seems that my form $(#contactForm).validate() below,on my form is ALWAYS throwing a NOT Valid. What I would like to happen is the error message defined in my model would appear and the $.ajax() post would be prevented, if there are errors.
  $("#btnSubmit").click(function () {
        if ($("#contactForm1").validate()) {
            alert("Form is Valid");
            return true;
        } else {
            alert("Form is NOT Valid");
            return false;
        }

        var frm = $('#contactForm1').serialize()

        $.ajax({

            type: "POST",
            url: "/Home/AddContact/",
            data: frm,
            success: function (ajaxRespond) {
                if (ajaxRespond.dbUpdateResult == "success") {
                    $("#myModal").modal("hide");
                    reloadContactLinks()
                }
            }
        })

    })

I have a view model: set with Required Annotations
  public class Contact
    {
        public int Contact_ID { get; set; }
        public int Dataset_ID { get; set; }
        public string Booth_UCID { get; set; }
        [Required(ErrorMessage = "First Name is a required field")]
        public string First_Name { get; set; }
        [Required(ErrorMessage = "Last Name is a required field")]
        public string Last_Name { get; set; }
        public string Title_Role { get; set; }
        public int Contact_Type_ID { get; set; }
        [Required(ErrorMessage = "Email is a required field")]
        public string Email { get; set; }
        [Required(ErrorMessage = "Phone Number is a required field")]
        public string Phone_Number { get; set; }
        public string Email_2 { get; set; }
        public string Phone_Number_2 { get; set; }
    }

I have my partial View with JQuery Validate and Ajax Post
   @model ResearchDataInventoryWeb.Models.Contact
    @using (Html.BeginForm(new { id = "contactForm1" }))
    {
        <div class="section_header2">Contact</div>
        <div style="padding-top:5px;">
            <table>
                <tr>
                    <td>
                        <span class="display-label">UCID/Booth ID</span>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Booth_UCID, new { placeholder = "<Booth/UCID>", @class = "input-box" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Type</span>
                    </td>
                    <td>
                        <select class="input-box" id="contact_type">
                            <option value="contact_type">Contact Type*</option>
                            <option value="dataset_admin">Dataset Admin</option>
                            <option value="dataset_Provider">Dataset Provider</option>
                            <option value="department">Department</option>
                            <option value="external_collaborator">External Collaborator</option>
                            <option value="principal_investigator">Principal Investigator</option>
                            <option value="research_center">Research Center</option>
                            <option value="vendor">Vendor</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Name</span>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.First_Name, new { placeholder = "<First Name>", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.First_Name, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Last_Name, new { placeholder = "<Last Name>", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Last_Name, "", new { @class = "text-danger" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Email</span>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Email, new { placeholder = "<Email 1>", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Email_2, new { placeholder = "<Email 2>", @class = "input-box-modal" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Phone</span>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Phone_Number, new { placeholder = "<Phone 1>", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Phone_Number, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Phone_Number_2, new { placeholder = "<Phone 2>", @class = "input-box-modal" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Job Title</span>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Title_Role, new { placeholder = "<Job Title>", @class = "input-box" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="display-label">Organization</span>
                    </td>
                    <td>
                        <input class="input-box" type="text" placeholder="<Organization>" />
                    </td>
                </tr>
    
            </table>
            <div style="padding-left:10px; margin-top:10px;">
                <textarea rows="3" placeholder="Notes"></textarea>
            </div>
        </div>
        <div class="centerButton" style="margin-top: 30px;">
            <div style="margin-left:30px">
                <submit id="btnSubmit" class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">SAVE</span></submit>
            </div>
            <div style="margin-left:30px">
                <submit class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">REMOVE</span></submit>
            </div>
        </div>
    }
    <script type="text/javascript">
        $("#btnSubmit").click(function () {
            if ($("#contactForm1").validate()) {
                alert("Form is Valid");
                return true;
            } else {
                alert("Form is NOT Valid");
                return false;
            }
    
            var frm = $('#contactForm1').serialize()
    
            $.ajax({
    
                type: "POST",
                url: "/Home/AddContact/",
                data: frm,
                success: function (ajaxRespond) {
                    if (ajaxRespond.dbUpdateResult == "success") {
                        $("#myModal").modal("hide");
                        reloadContactLinks()
                    }
                }
            })
    
        })
    
    </script>


A: If you want to work on the DOM it should be ready, so I'm suggesting you to change it that way and I hope it will help. If not, we should look for other issues.
EDIT!!! That is a very rough example and may have some issues, but that's the way you should use validator. The validator captures onsubmit form event, so no click handler is required and it's bat if you do it that way as I believe first click event is handled.
<script type="text/javascript">
$(function() { 

  var validator = $("contactForm1").validate({
      submitHandler: function(form){
          $(form).find('input[type=submit]').attr('disabled', 'disabled');
          var frm =$(form).serialize()    
          $.ajax({
              type: "POST",
              url: "/Home/AddContact/",
              data: frm,
              success: function (ajaxRespond) {
                if (ajaxRespond.dbUpdateResult == "success") {
                    $("#myModal").modal("hide");
                    reloadContactLinks()
                }
              }
          })    
      }
  });

});
</script>

