Ошибка: Uncaught TypeError: $ (...). Valid не является функцией при использовании ('#form'). Valid()

Question

Вот моя страница, где я хочу проверить, является ли форма действительной или нет функцией jquery. .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> 

Это моя модель:

Вот когда я отлаживать код сценария в браузере, то он дал «неперехваченный TypeError: $ (...) действует это. не функция "эта ошибка в функции valid(). Как решить эту проблему? спасибо заранее ...

Answer 1

Возможно, вы не связали свои библиотеки правильно или библиотеки отсутствуют. В результате он не распознает функцию с помощью $(whatever).valid().

Answer 2

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

As per the documentation, вы можете использовать только .valid() нибудь после.validate() называется.

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

Поскольку вы используете рамки Microsoft, .validate() построена и автоматически вызывается jquery.validate.unobtrusive.js плагин.

Вы будете иметь, чтобы проверить свой живой DOM, чтобы увидеть, где .validate() называются и убедитесь, что ваш призыв к .valid() перемещается куда-нибудь после.validate() вызова.

Answer 3

Эта ошибка

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

в основном за счет плагинов overlaps.So проверки плагинов и включить правильно плагины. У меня была эта ошибка и корректно добавлены плагины, поддерживающие jquery.