无法理解为什么我的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/