[MVC4-基礎] 使用DataAnnotations+jQuery進行表單驗證

我目前有以下表單，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.全部填完