ボタンを押すとinputが生成されるコードを書いたのですが、JavascriptのinnerHTMLを使って生成されたinputでは設定しているバリデーションが機能せず、エラーメッセージが表示されません。
対照的に、地に書いたinputの場合は設定されているバリデーションが機能し、エラーメッセージを表示することができます。
バリデーションライブラリはjQuery.Validation v1.17.0とMicrosoft.jQuery.Unobtrusive.Validation v3.2.11です。
innerHTMLで生成する要素にバリデーションを付けてエラーメッセージが出るようにする方法はないのでしょうか?
教えていただけると大変助かります。
以下にHTMLのコードを載せました。
HTML5
1<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="" /> 2<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="num1" id="num_vali1"></span> 3 4<div> 5 <button onclick="add()">input追加</button> 6</div> 7 8<div id="piyo"> 9</div> 10 11<script> 12 function add() { 13 var div_element = document.createElement("div"); 14 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="" />' 15 + '<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="num2" id="num_vali2"></span>'; 16 var parent_object = document.getElementById("piyo"); 17 parent_object.appendChild(div_element); 18 } 19</script>
jQueryの書き方でバリデーションをかける方法もありますが、タグの書き方やjavascriptで行う方法はないでしょうか?
jQueryでのバリデーションのかけ方
回答1件
あなたの回答
tips
プレビュー