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