javascript - JQuery 验证不适用于 ajax post

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

和我工作的 View :

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