<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive jQuery Validation for Dynamic Content</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"
type="text/javascript"> </script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"
type="text/javascript"> </script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"
type="text/javascript"> </script>
<style type="text/css">
body,input { font-size: 9pt; }
.input-validation-error { border: 1px solid #ff0000 }
.input-validation-valid { border: 1px solid #00ff00 }
.field-validation-error { color: #ff0000 }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #ff0000 }
.validation-summary-valid { display: none }
</style>
<script type="text/javascript">
$(function () {
//tReq新增數字檢核
$("#tReq").attr("data-val-number", "須為數字(動態加上的檢核)");
//無中生有新增一個<input id=tDyna>，並加上必填檢核
var id = "tDyna";
$("#dvDyna").append("<input type='text' id='" + id + "' />");
$("#tDyna").attr({
name: id,
"data-val": "true",
"data-val-required": "不可空白(動態加上的檢核)",
}).after("<span data-valmsg-for='" + id + "' />");
//要先移除原有設定
$("#form1").removeData("validator");
//方法一，傳入新增檢核設定的元素，包含該元素的<form>會重設檢核條件
//$.validator.unobtrusive.parseElement(document.getElementById("tDyna"));
//方法二，傳入內含<input data-val="true">元素的容器selector，
//將重新解析容器內的元素的data-val-*設定，接著所有的<form>會更新檢核規則
//$.validator.unobtrusive.parse("#dvDyna");
//在本案例中方法一、二都只更新了<input id='tDyna'>。<input id='tReq'>新增的
//data-val-number並未被解析生效，我們可擴大解析範圍改善這個問題
$.validator.unobtrusive.parse("#form1"); //或parse(document)亦可
});
</script>
</head>
<body>
<form id="form1">
<div>
<input type="text" id="tReq" name="tReq"
data-val = "true" data-val-required = "不可空白" />
<span data-valmsg-for="tReq"></span>
</div>
<div id="dvDyna">
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>