Bootstrap Modal 中，Client 端 Model Validation 失效解決辦法

問題: 在 MVC 專案中，動態產生的表單項目 (如 Textbox, Checkbox 等) 在表單送出 (Submit) 時，無法進行 Client 端驗證

解法:

#1 確認必要的 .js 是否都載入

jquery.validate.js
jquery.validate.unobtrusive.js

MVC Bundles:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

#2 確認 Web.Config 是否啟用 unobtrusive validation
也就是 appSettings 區塊內的 ClientValidationEnabled 跟 UnobtrusiveJavaScriptEnabled 都要設為 true


#3 動態的表單內容產出後，需要重新綁定 unobtrusive validation

$.validator.unobtrusive.parse('FORM_ID_OR_HTML_ELEMENT');

parse 地方設定 form (頁面上所有的 form) 或是指定的表單 ID

$.get(
'@Url.Action("GetContent", "RenderSource")', { act: 'view' },
  function (data) {
    $('#ContentContainer').html(data);
    //rebind unobtrusive validation
    $.validator.unobtrusive.parse('form');
});

在表單送出前，透過 $('表單ID').valid() 即可知道 Client 端驗證是否正確

$('form#FormID').valid();

參考內容

1. 謙卑式jQuery檢核範例-動態變更檢核設定 
2. MVC client side validation not working with modal or Bootstrap model 
3. Unobtrusive validation not working with dynamic content 
4. Unobtrusive validation not working on Ajax loaded partial view