弹出式模态验证

Question

我在用ajax.post之前的验证表单时遇到这个问题，我无法通过pop_up进行验证，我已经阅读了许多有关类似问题的文章，但没有适用于我的解决方案。我不确定代码有什么问题。

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

         <div class="modal fade" id="PGModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <a href="#" class="close" data-dismiss="modal">&times;</a>
                        <h4 id="PGModalTitle"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="PGform">

                            <fieldset id="SubmitPGform">
                                @Html.AntiForgeryToken()
                                @Html.HiddenFor(m => m.HR_Setup_PayGradeVMId, new { @id = "PayGradeVMId" })
                                @Html.HiddenFor(m => m.HR_SetupId, new { @id = "SetupId", @Value = ViewBag.SetupId })

                                <div class="form-group">
                                    <label>Name:</label>
                                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @id = "Name", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    <label>Range Start:</label>
                                    @Html.EditorFor(model => model.RangeStart, new { htmlAttributes = new { @id = "RangeStart", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.RangeStart, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    <label>Range End:</label>
                                    @Html.EditorFor(model => model.RangeEnd, new { htmlAttributes = new { @id = "RangeEnd", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.RangeEnd, "", new { @class = "text-danger" })
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-success" id="SavePayGradeRecord">Save</button>
                                    <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
                                </div>

                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>


    @section scripts
        {
        <script type="text/javascript">



            $(function () {
                LoadPayGrades();

            });


            //Show The Popup Modal For Add New PayGrade
            function AddNewPayGrade() {

                $("#PGform")[0].reset();
                $("#PayGradeVMId").val(0);
                $("#PGModalTitle").html("Add New Pay Grade");
                $("#PGModal").modal();
            }

            //Show The Popup Modal For Edit PayGrade Record
            function EditPayGrade(id) {

                $("#PGModalTitle").html("Update Pay Grade Record");
                $("#PGModal").modal();
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("GetPayGradeById", "PayGrade")/' + id,
                    success: function (data) {
                        var obj = JSON.parse(data);
                        $("#PayGradeVMId").val(obj.HR_Setup_PayGradeVMId);
                        $("#Name").val(obj.Name);
                        $("#RangeStart").val(obj.RangeStart);
                        $("#RangeEnd").val(obj.RangeEnd);
                    }
                })
            }

            //Save Pay Grade Data to Database
            $("#SavePayGradeRecord").click(function ()
            {

                $("#PGform").validate({
                    rules: {
                        Name: {
                            required: true,
                            minlength: 2
                        }
                    },
                    messages: {
                        Name: {
                            required: "Name Required",
                            minlength: "Minumum 2 charactors"
                        }
                    },
                    submitHandler: function (form) {
                        var data = $("#SubmitPGform").serialize();
                        $.ajax({
                            url: '@Url.Action("CreatePayGrade", "PayGrade")',
                            type: 'POST',
                            data: data,
                            success: function (response) {
                                $("#PGModalTitle").html("");
                                location.reload();
                                $("#PGModal").modal("hide");
                            }
                        });
                    }
                });

            })

        </script>
    }

我的版式中包含以下库。

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")

        @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

尝试了一些关于stackoverflow的建议， Validate form before Bootstrap modal popup

我正在获取.validate的Crome调试不是函数，但是该表单显示视图模型的数据注释消息，而不是验证Jquery消息，表单不提交ajax帖子。 任何解决方案的想法，我都可以做自己的验证功能，并在ajax发布之前使用它，但是我想如果这是内置的功能，为什么不使用它。