我目前有以下表單，Select部分因為必須上一層有選擇下層才有資料，因此使用jQuery驗證問題類型是否有選擇就好，而問題描述要驗證是否為空，這裡採用MVC內建的DataAnnotations來驗證。
1.View(HTML)
視圖顯示的布局如下
<h2>維修申請單</h2> <form id="RepairForm">
<p> @Html.Label("dept", "申請部門")
<select class="DropDownList" id="dept" name="dept"></select>
<br /> @Html.Label("deviceType", "設備類型")
<select class="DropDownList" id="deviceType" name="deviceType"></select>
<br /> @Html.Label("deviceId", "設備編號")
<select class="DropDownList" id="deviceId" name="deviceId"></select><text id="deviceDesc" style="color:red"></text>
<br /> @Html.Label("problemType", "問題類型")
<select class="DropDownList" id="problemType" name="problemType"></select>
<br /> @Html.Label("problemDesc", "問題描述")
@Html.TextArea("problemDesc")
<br /> </p> <input type="submit" value="提出申請" />
</form>
View(HTML) Code
2.View(jQuery)
jQuery提交表單的程式碼如下
$("#RepairForm").submit(
function () {
$(".DropDownList").attr("disabled", false); //提交前把控件開啟才能提交
if (problemType.value == "Value") {
alert("Hey,你資料沒填完整！！");
location.reload(); //資料寫錯就重新整理重填
return false;
}
$.post("/Repair/PostData", //接收提交的Action
$("#RepairForm").serialize(), //提交
function (result) {
if (result.msg == "Error") {
alert("Hey,你資料沒填完整！！");
location.reload(); //資料寫錯就重新整理重填
} else {
alert(result.msg); //Show出申請單號
}
},
"json" //接收由Controller返回的資料類型
);
return false; //避免讓ASP.NET處理Submit
});
View(jQuery) Code
3.Controller
[HttpPost]
public JsonResult PostData(RepairForm form)
{
JData data = new JData();
if (ModelState.IsValid) //如果驗證成功
{
data.msg = this.GetSerial(); //取得序號
//Do something...例如存入DB return Json(data);
}
data.msg = "Error"; //驗證失敗返回"Error"
return Json(data);
} //JSON數據模型
public class JData
{
public string msg { get; set; }
}
Controller
4.Model(重要：主要是模型這裡在驗證的)
請記得引用System.ComponentModel.DataAnnotations才能啟用驗證功能哦！
public class RepairForm
{
//這裡把RepairForm裡的元素一一對上
[Required]
public String dept { get; set; }
[Required]
public String deviceType { get; set; }
[Required]
public String deviceId { get; set; }
[Required]
public String problemType { get; set; }
[Required]
public String problemDesc { get; set; }
}
執行結果：
1.Select沒全部選完<由jQuery擋住>
2.TextArea空白<由DataAnnotations驗證後返回>
3.全部填完