MVC使用jQuery進行手動表單驗證總是返回True

Question

我一直在通過MVC 4項目中的ajax請求提交表單時難以獲得不顯眼的驗證。作爲參考，個人本主題是做幾乎我在做同樣的事情：

Manual form validation in MVC 3 and JQuery

通過我做了什麼裏去了，但我仍然無法得到它的工作。問題是，當我做$（「＃Form」）。valid（）時，它總是返回true，即使我發送請求，模型也是無效的。我在我的捆綁包中設置了適當的腳本，但我無法使表單正確驗證客戶端。我怎樣才能使這個驗證正確？我認爲，一旦數據註釋建立起來了，它就「只應該工作」，但顯然在這裏並不是這樣。

此外，這個特殊的窗體也在部分視圖中的Kendo UI窗口中加載了jQuery。在查看這篇文章的答案後：Asp MVC unobtrusive Client Validation always returning true使用表單id作爲選擇器，.valid（）仍然返回true，但Class Name爲false。但是，guid學期id返回true。

我的代碼如下：

型號

public class Class 
{ 
    public Class() 
    { 
    ClassId = Guid.NewGuid(); 
    } 

    [Key] 
    public Guid ClassId { get; set; } 

    [Display(Name = "Class Name")] 
    [Required(ErrorMessage = "A Class Name is required.")] 
    public string ClassName { get; set; } 

    public int UserId { get; set; } 

    [Display(Name = "Term Type")] 
    [Required(ErrorMessage = "The Term Type is required.")] 
    public Guid SemesterId { get; set; } 

    [ForeignKey("SemesterId")] 
    public virtual Semester Semester { get; set; } 

    [Display(Name = "Class Year")] 
    public int Year { get; set; } 

    [Display(Name = "Has Weighted Grades?")] 
    public bool HasWeightedGrades { get; set; } 

    public virtual List<Grade> Grades { get; set; } 

}

形式

@using (Html.BeginForm("AddClass", "", FormMethod.Post, new { name = "AddNewClassForm", id = "AddNewClassForm" })) 
{ 
    <div> 
    <div>@Html.LabelFor(m => m.ClassName)</div> 
    <div> 
     @Html.TextBoxFor(m => m.ClassName, new { @class = "input-xlarge" }) 
     @Html.ValidationMessageFor(m => m.ClassName) 
    </div> 
    <div>@Html.LabelFor(m => m.SemesterId)</div> 
    <div> 
     @Html.DropDownList("SemesterId", null, "-- Select a Term Type --", new { @class = "input-xlarge" }) 
     @Html.ValidationMessageFor(m => m.SemesterId) 
    </div> 
    </div> 
} 

<div> 
    <button id="AddClassButton" class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i> Add Class</button> 
    <button id="CancelAddClassButton" class="btn btn-danger" type="submit"><i class="icon-ban-circle icon-white"></i> Cancel</button> 
</div> 

jQuery的事件

//================================================================================================================================ 
// AddClassButton: Click event handlers. 
//================================================================================================================================ 
$('#AddClassButton').unbind('click').bind('click', function (e) { 
    $.validator.unobtrusive.parse($('#AddClassWindow')); 
    var val = $("#AddNewClassForm").validate(); 
    val.showErrors(); 
    alert("Is the form valid? " + val.valid()); //Always returns true 

    alert("Is Class Name Valid? " + $("#ClassName").valid()); //Still returns true 
    alert("Is Semester Id Valid? " + $("#SemesterId").valid()); //Still returns true 

    e.preventDefault(); // Prevent this from doing default (possibly submit form). 
    e.stopPropagation(); // Prevent infinite loop. 
}); 

個

捆綁

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*")); 

//Ignoring these so only the min.js versions get rendered 
bundles.IgnoreList.Ignore("jquery.validate.js"); 
bundles.IgnoreList.Ignore("jquery.validate.unobtrusive.js"); 
bundles.IgnoreList.Ignore("jquery.unobtrusive-ajax.js"); 

控制器動作

[Authorize] 
public ActionResult AddClass() 
{ 
    var userName = User.Identity.Name; 
    var userProfile = db.UserProfiles.SingleOrDefault(x => x.UserName == userName); 

    InitializeSemesters(); 
    InitializeYears(); 

    return PartialView(new Class() { UserId = userProfile.UserId, Year = DateTime.Now.Year }); 
} 

Answer 1

如果

alert("Is the form valid? " + val.valid()); //Always returns true 

什麼

alert("Is the form valid? " + $("#AddNewClassForm").valid()); // ??? 

這個工作對我來說...

Answer 2

您需要在要驗證的表單上調用.valid()，而不是.validate()方法的結果。

不像很多jQuery方法，.validate()不適合鏈接，因爲它返回，而不是原來的jQuery對象Validator類型的對象（見：http://jqueryvalidation.org/validate/）

Answer 3

該擴建工程，形成了我：

$(document).ready(function() { 
    jQuery.noConflict(); 

    // if the form is in a dialog box { 
    var form = $('#formCreateRequest'); 
    form 
     .removeData('validator') 
     .removeData('nobtrusiveValidation'); 
    $.validator.unobtrusive.parse(form); // } 

    $.fn.extend({ 
     // form validation { 
     isValid: function() { 
      var self = $(this); 
      $.validator.unobtrusive.parse(self); 
      return self.data('unobtrusiveValidation').validate(); 
     } // } 
    }); 
}); 

使用：

if ($('#formId').isValid()) { 
    ... 
} else { 
    ... 
} 

Answer 4

你有以下腳本添加到您的_layout或視圖「jquery.unobtrusive-ajax.js」 「jquery.validate.js」 「jquery.validate.unobtrusive。js「