错误:未捕获表单：$(...).valid在使用(‘#TypeError’).valid()时不是函数

Question

这是我想检查表单是否有效的页面，jquery的function..Code如下所示：

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row" style="width:80%;padding-top:20px;margin-left:3%;">
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "addNominationForm"}))
        {
            @Html.AntiForgeryToken()

            <div class="white-bg" style="padding-left:2%">

                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group" style="padding-top:10px">

                    @Html.Label("Nomination Category", htmlAttributes: new { @class = "control-label col-md-3 requiredfeild", style = "text-align: left" })
                    <div>
                        @Html.DropDownListFor(model => model.AwardId, @ViewBag.Awards as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "Award", style = "width:25%" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.Label("Resource From", htmlAttributes: new { @class = "control-label col-md-3 requiredfeild", style = "text-align: left" })
                    <div>
                        <label> @Html.RadioButtonFor(model => model.SelectResourcesBy, "Project", new { htmlAttributes = new { @class = "form-control" }, id = "ProjectRadioButton" })Project</label>
                        &nbsp;
                        <label> @Html.RadioButtonFor(model => model.SelectResourcesBy, "Department", new { htmlAttributes = new { @class = "form-control" }, id = "DepartmentRadioButton" })Department</label>
                    </div>
                </div>

                <input type="hidden" name=ManagerId value=@ViewBag.ManagerId>

                <div class="form-group" id="projectInput">
                    @Html.Label("Project", htmlAttributes: new { @class = "control-label col-md-3 requiredfeild", style = "text-align: left" })
                    <div>
                        @Html.DropDownListFor(model => model.ProjectID, @ViewBag.ProjectsUnderCurrentUser as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "SelectedProject", style = "width:25%" })
                    </div>
                </div>

                <div class="form-group" id="departmentInput">
                    @Html.Label("Department", htmlAttributes: new { @class = "control-label col-md-3 requiredfeild", style = "text-align: left" })
                    <div>
                        @Html.DropDownListFor(model => model.DepartmentId, @ViewBag.DepartmentsUnderCurrentUser as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "SelectedDepartment", style = "width:25%" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.Label("Resource Name", htmlAttributes: new { @class = "control-label col-md-3 requiredfeild", style = "text-align: left" })
                    <div>
                        @Html.DropDownListFor(model => model.ResourceId, @ViewBag.Resources as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "Resources", style = "width:25%" })
                    </div>
                </div>

                <div class="form-group" style="padding-bottom:10px">
                    @Html.Label("Is PLC ?", htmlAttributes: new { @class = "control-label col-md-3", style = "text-align: left" })
                    <div>
                        @Html.CheckBoxFor(model => model.IsPLC, new { htmlAttributes = new { @class = "form-control" }, id = "IsPlcCheckbox" }) Yes
                    </div>
                </div>
            </div>
            <br />
            <div class="form-group">
                <div>
                    <div id="Criterias">
                        <table class="table table-hover issue-tracker white-bg" id="criteriaTable"></table>
                    </div>
                    @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
                </div>
            </div>
            <br />
            <div class="form-group white-bg" style="padding-top:10px;padding-bottom;padding-left:2%">
                @Html.Label("Comment", htmlAttributes: new { @class = "control-label col-md-2 requiredfeild", style = "text-align: left" })
                <div>
                    @Html.TextAreaFor(model => model.MainComment, new { htmlAttributes = new { @class = "form-control" }, id = "managerComment", style = "min-width: 80%", rows = "7", placeholder = "If candidate is selected as winner, this text will be shared across the company" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-3">
                    <input type="submit" name="submit" value="Save Draft" id="saveButton" class="btn btn-warning btnSameSize" />
                    <input type="submit" name="submit" value="Submit" id="submitButton" class="btn btn-success-green btnSameSize" onclick="return checkCriteriaComments();" />
                    <input type="button" value="Cancel" class="btn btn-danger btnSameSize" onclick="location.href='@Url.Action("Dashboard", "Dashboard")'" />
                </div>
            </div>

        }
    </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">


    function checkCriteriaComments() {
        var comments = 0;

         if($("#addNominationForm").valid())
         {
               alert("valid form");
         }    


        $(".criteriaComment").children("textarea").each(function (data) {
            if ($(this).val().trim())
                comments++;
        });

        if (!$("#Award").val()) {
            $("#Award").tooltip({ title: "Select Award.", placement: 'right' }).tooltip('show');
            return false;
        }

        else if (comments < 1) {
            $(".criteriaComment").children("textarea").first().tooltip({ title: "Enter at least one criteria comment.", placement: 'right' }).tooltip('show');
            return false;
        }
        else if (!$("#managerComment").val()) {
            $("#managerComment").tooltip({ title: "Enter main comment.", placement: 'right' }).tooltip('show');
            return false;
        }
        else {
            swal({
                title: "Add Nomination",
                text: "Do you want to nominate this candidate?",
                type: "info",
                showCancelButton: true,
                confirmButtonColor: "#88a364",
                confirmButtonText: "Yes!",
                cancelButtonText: "No!",
                closeOnConfirm: false,
                closeOnCancel: false
            },
              function (isConfirm) {
                  if (isConfirm) {
                      debugger;
                      var model = $('#addNominationForm').serialize()

                      $.ajax({
                          type: 'post',
                          url: '@Url.Action("AddNomination", "Nomination")',
                          data: JSON.stringify({ model: model,submit:"Submit" }),
                          contentType: "application/json; charset=utf-8",
                          success: function (data) {
                              swal({
                                  title: "Nominated Successfully",
                                  showCancelButton: false,
                                  confirmButtonColor: "#88a364",
                                  confirmButtonText: "Ok"
                              },
                              function () {
                                  if (isConfirm) {
                                      window.location.href = '@Url.Action("Dashboard", "Dashboard")';
                                  }
                              });
                          }
                      });
                  } else {
                      swal("Cancelled", "Nomination Cancelled");
                  }
              });

            return true;
        }

    }
    }

</script>

这是我的模型：

  public class NominationViewModel
    {
        [Required(ErrorMessage = "Select Award")]
        public int AwardId { get; set; }

        public int NominationId { get; set; }
        public int ManagerId { get; set; }

        [Required(ErrorMessage = "Select Resource")]
        public int ResourceId { get; set; }

        [Required(ErrorMessage = "Select Project")]
        public int? ProjectID { get; set; }

        [Required(ErrorMessage = "Select Department")]
        public int? DepartmentId { get; set; }
        public bool IsPLC { get; set; }
        public bool? IsSubmitted { get; set; }

        public string MainComment { get; set; }

        [Required(ErrorMessage = "Select Project or Department")]
        public string SelectResourcesBy { get; set; }  //from project or from department

        [Required(ErrorMessage = "Please provide comment against criteria")]
        public IList<CriteriaCommentViewModel> Comments { get; set; }

        public NominationViewModel()
        {
            Comments = new List<CriteriaCommentViewModel>();
        }

    }

在这里，当我在浏览器中调试脚本代码时，它给出了“未捕获的TypeError：$(...).valid不是一个函数”，这个关于valid() function..How的错误可以解决这个问题吗？先谢谢你...

Answer 1

“未捕获TypeError：$(...).valid不是函数”

As per the documentation，您只能在调用.validate()之后的某个时间使用.valid()。

在使用此方法检查窗体之前，需要在窗体上调用

validate()。

由于您使用的是微软框架，因此jquery.validate.unobtrusive.js插件会自动构造和调用.validate()。

您将不得不检查您的活动DOM，以查看调用.validate()的位置，并确保在.validate()调用之后将对.valid()的调用移动到某个位置。

Answer 2

此错误

Error:Uncaught TypeError: $(…).valid is not a function while using ('#form').valid

主要是由于插件overlaps.So检查插件和正确包含插件。我有这个错误，并以适当的方式添加了jquery验证插件。

Answer 3

可能的原因是，您没有正确地链接您的库，或者缺少库。因此，它无法识别$(whatever).valid()的函数。