innerHTMLで追加したinputのバリデーションが機能しない

Question

ボタンを押すとinputが生成されるコードを書いたのですが、JavascriptのinnerHTMLを使って生成されたinputでは設定しているバリデーションが機能せず、エラーメッセージが表示されません。

対照的に、地に書いたinputの場合は設定されているバリデーションが機能し、エラーメッセージを表示することができます。

バリデーションライブラリはjQuery.Validation v1.17.0とMicrosoft.jQuery.Unobtrusive.Validation v3.2.11です。

innerHTMLで生成する要素にバリデーションを付けてエラーメッセージが出るようにする方法はないのでしょうか？
教えていただけると大変助かります。

以下にHTMLのコードを載せました。

<input name="num1" class="form-control text-box single-line" id="num__1" type="number" data-val-required="入力は必須です。" data-val="true" data-val-range-min="1" data-val-range-max="223" data-val-range="1から223までの範囲で指定してください。" data-val-number="第1オクテットには数字を指定してください。" value="" />
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="num1" id="num_vali1"></span>

<div>
  <button onclick="add()">input追加</button>
</div>

<div id="piyo">
</div>

<script>
	function add() {
		var div_element = document.createElement("div");
		div_element.innerHTML = '<input name="num2" class="form-control text-box single-line" id="num__2" type="number" data-val-required="入力は必須です。" data-val="true" data-val-range-min="1" data-val-range-max="223" data-val-range="1から223までの範囲で指定してください。" data-val-number="第1オクテットには数字を指定してください。" value="" />'
			+ '<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="num2" id="num_vali2"></span>';
		var parent_object = document.getElementById("piyo");
		parent_object.appendChild(div_element);
	}
</script>

以下が実行したときの画面です。

jQueryの書き方でバリデーションをかける方法もありますが、タグの書き方やjavascriptで行う方法はないでしょうか？
jQueryでのバリデーションのかけ方

Comments

[kei344]

validationに使用しているライブラリを提示してください。

[maisumakun]

バリデーションライブラリとしては何を使っていますか？

[m.ts10806]

>@section Scripts{
これは何かのテンプレートエンジンでしょうか。(C#かな？)
タグの情報だけで質問したいのでしたらブラウザ出力した際の「ソースを表示」で確認できるHTMLだけを提示してください。

[yambejp]

命題の状況だとaddしないinputにもバリデートは効いていませんね

[j_t]

ご指摘ありがとうございます。
バリデーションライブラリを提示しました。
また、質問には不要な要素ということで「@section Scripts{」を削除しました。Razorのソースでした。

[yambejp]

jQueryのバリデーションをかけるためのスクリプトってないのでしょうか？

[j_t]

jQueryでのかけ方も調べたら出てきましたが、出来ればinnerHTMLなどjavascriptの書き方で解決したいです。
無理であれば、jQueryでバリデーションをかけます。

[yambejp]

> バリデーションライブラリはjQuery.Validation v1.17.0

としながら

> jQueryの書き方でバリデーションをかける方法もありますが、タグの書き方やjavascriptで行う方法はないでしょうか？

というのはロジックが破綻しています

結局、jQueryのバリデーションライブラリは利用していないのですね？

[j_t]

元々のソースはMVCを使って書いてあります。Listの形式で受け取ったmodelに動的に要素を追加してpostで送る処理を書きたかったのですが、
@HTML.EditorForと@ValidationMessageForで生成されるHTMLのコードを複製することでコントロールの動的な追加およびバリデーションを実現しようと考え、そのやり方に固執していました。
jQueryでのかけ方も試してみようと思います。

[j_t]

>命題の状況だとaddしないinputにもバリデートは効いていませんね
昨日はバリデーションが効いていたのですが、今日実行したら効かなくなっていました。
信じられないですが。

Answer 1

jQueryによるvalidationルールを設定することで解決しました。

別の質問でのyambejpさんからのご回答を使わせていただきました。

$("[name^=num]").each(function () {
		$(this).rules("add", {
			required: true,
			number: true,
			range:[1,223],
			regex: "[^.]+",
			messages: {
				required: "入力必須です。",
				number: "数字を指定してください。",
				range: "1から223までの範囲で指定してください。",
				regex: "整数で入力してください。"
			}
		});
	});