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

Here is my page where I want to check is form valid or not from jquery function..Code is as follows:

<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 [email protected]>

                <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>

This is my model:

  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>();
        }

    }

Here when I debug the script code in browser then it gave "Uncaught TypeError: $(...).valid is not a function" this error on valid() function..How can solve this problem? thanks in advance...

Upvotes: 2

Answers (3)

Manukumar

Reputation: 1

This error

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

is mainly due to plugins overlaps.So check plugins and include correctly the plugins. I had that error and added jquery-validating plugins in a proper way.

Upvotes: -1

Sparky

Reputation: 98718

"Uncaught TypeError: $(...).valid is not a function"

As per the documentation, you can only use .valid() sometime after .validate() is called.

validate() needs to be called on the form before checking it using this method.

Since you're using a Microsoft framework, .validate() is constructed and called automatically by the jquery.validate.unobtrusive.js plugin.

You're going to have to inspect your live DOM to see where .validate() is called and make sure that your call to .valid() is moved to someplace after the .validate() call.

Upvotes: 0

nipunadrox

Reputation: 21

The possible reason is, you haven't linked your libraries properly or libraries missing. As a result, it fails to recognize the function with $(whatever).valid().

Upvotes: -2

Error:Uncaught TypeError: $(...).valid is not a function while using (&#39;#form&#39;).valid()

Answers (3)

Related Questions

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