JQuery验证与ajax无关

Question

无法得知为什么我的JQuery验证不能在我的ProjectName字段上工作，它允许发布空值，原因可能是该操作使用ajax调用，并且所有数据都是没有提交表单设置？ 这里是我的模型：

{ 
public class ProjectViewModel 
{ 
    public int ProjectId { get; set; } 

    [Required(ErrorMessage = "*")] 
    [Display(Name = "project_name", ResourceType = typeof(Localization))] 
    public string ProjectName { get; set; } 

    [Display(Name = "project_description", ResourceType = typeof(Localization))] 
    public string ProjectDescription { get; set; } 

    [Display(Name = "system_kind", ResourceType = typeof(Localization))] 
    public string SystemType { get; set; } 

    [Display(Name = "project_manager", ResourceType = typeof(Localization))] 
    public string ProjectManager { get; set; } 

    [Display(Name = "project_type", ResourceType = typeof(Localization))] 
    public string ProjectType { get; set; } 

    [Display(Name = "fixed_bid", ResourceType = typeof(Localization))] 
    public bool FixedBid { get; set; } 

    [Display(Name = "TM", ResourceType = typeof(Localization))] 
    public bool TimeAndMaterials { get; set; } 

    public Nullable<System.DateTime> StartDate { get; set; } 

    public Nullable<System.DateTime> TillDate { get; set; } 
} 

和我的工作观：

@model BTGHRM.Models.ProjectViewModel 

<link href="~/Content/themes/custom/MyCustom.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="~/Scripts/jquery-ui.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#postToServ").click(function() { 

      var dataObject = { 
       ProjectName: $("#ProjectName").val(), 
       ProjectDescription: $("#ProjectDescription").val(), 
       SystemType: $("#SystemType").val(), 
       ProjectManager: $("#ProjectManager").val(), 
       FixedBid: $("#FixedBid").val(), 
       TimeAndMaterials: $("#TimeAndMaterials").val(), 
       StartDate: $("#datepicker").val(), 
       TillDate: $("#datepicker1").val() 
      }; 

      $.ajax({ 
       url: "/Project/ProjectRegistration", 
       type: "POST", 
       data: dataObject, 
       dataType: "json", 
       success: function() { 
        $("#loading_content").html("<br><b>"+"@Resources.Localization.data_successfully_saved"+"!</b>"); 
       }, 
       error: function() { 
        alert("Unable to save! Try again"); 

       } 
      }); 

     }) 
    }) 
</script> 

<span class="content_h4">@Resources.Localization.register_project</span> 
<br /><br /> 

    @using (Html.BeginForm(new { id="MyForm"})) 
    { 
     <table style="width:100%"> 
      <tr> 
       <td style="width:20%"> 
        <b>@Html.LabelFor(m => m.ProjectName):</b> 
       </td> 
       <td style="width:80%"> 
        @Html.TextBoxFor(m => m.ProjectName, new { style = "width:80%"}) 
        @Html.ValidationMessageFor(m => m.ProjectName, "", new { @class = "text-danger" }) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        @Html.LabelFor(m => m.ProjectDescription): 
       </td> 
       <td> 
        @Html.TextAreaFor(m => m.ProjectDescription, new { style = "width:80%; height:110px" }) 
       </td> 
      </tr> 
      //some similar code 
    </table> 
    <br /> 
    <div style="width:100%"> 
     <input type="button" id="postToServ" value=@Resources.Localization.save style="position: absolute; top: 50%; left:50%;"> 
    </div> 

} 
<div id="loading_content"></div> 

Answer 1

这应该工作：

注意要点：

1. 处理“提交“事件的形式，而不是按钮点击

2. 使用jQuery序列化表单。然后，您不必分别挑选每个表单元素，或者在将来您的字段更改时更改代码。

3. 手动调用表单验证方法并在进行ajax调用之前检查结果。

4. 此外，我做了“错误”功能符合jQuery文件。

更换

<input type="button" id="postToServ" ... 

与

<input type="submit" id="postToServ" ... 

，然后设置你的脚本是这样的：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#myForm").submit(function (event) { 
     event.preventDefault(); //stop default postback behaviour 

     var valid = $(this).valid(); //run form validation manually 

     if (valid == true) { 
     $.ajax({ 
      url: "/Project/ProjectRegistration", 
      type: "POST", 
      data: $(this).serialize(), // automatically read all the form data and convert to correct format for posting to server 
      dataType: "json", 
      success: function (response) { 
       $("#loading_content").html("<br><b>"+"@Resources.Localization.data_successfully_saved"+"!</b>"); 
      }, 
      error: function (jQXHR, textStatus, errorThrown) { 
       alert("An error occurred whilst trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown); 
      } 
     }); 
     } 
    }); 
}); 
</script>