How do I correct the error uncaught typeError validator is undefined and prevent my form from post if error

Question

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" }))
    {
        Contact
        
            
                
                    
                        UCID/Booth ID
                    
                    
                        @Html.TextBoxFor(model => model.Booth_UCID, new { placeholder = "", @class = "input-box" })
                    
                
                
                    
                        Type
                    
                    
                        
                    
                
                
                    
                        Name
                    
                    
                        @Html.TextBoxFor(model => model.First_Name, new { placeholder = "", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.First_Name, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Last_Name, new { placeholder = "", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Last_Name, "", new { @class = "text-danger" })
                    
                
                
                    
                        Email
                    
                    
                        @Html.TextBoxFor(model => model.Email, new { placeholder = "", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Email_2, new { placeholder = "", @class = "input-box-modal" })
                    
                
                
                    
                        Phone
                    
                    
                        @Html.TextBoxFor(model => model.Phone_Number, new { placeholder = "", @class = "input-box-modal" })
                        @Html.ValidationMessageFor(model => model.Phone_Number, "", new { @class = "text-danger" })
                        @Html.TextBoxFor(model => model.Phone_Number_2, new { placeholder = "", @class = "input-box-modal" })
                    
                
                
                    
                        Job Title
                    
                    
                        @Html.TextBoxFor(model => model.Title_Role, new { placeholder = "", @class = "input-box" })
                    
                
                
                    
                        Organization
                    
                    
                        
                    
                
    
            
            
                
            
        
        
            
                SAVE
            
            
                REMOVE
            
        
    }

user_1686626 · Answer

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.

How do I correct the error uncaught typeError validator is undefined and prevent my form from post if error

1 Answers