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>