无法理解为什么我的JQuery验证在我的ProjectName字段上不起作用,它允许发布空值,可能是因为用ajax调用了action并设置了所有数据而不提交表单的原因吗?
这是我的模特:

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

最佳答案

这应该工作:

注意事项:


处理表单的“提交”事件,而不是单击按钮
使用jQuery序列化表格。这样,您就不必分别挑选每个表单元素,也不必在将来更改字段时更改代码。
手动调用表单验证方法,并在进行ajax调用之前检查结果。
另外,我使“错误”功能与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>

关于javascript - jQuery验证不适用于Ajax发布,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38481284/

10-12 12:31
查看更多