[英]How to validate a fields which was created on button click
我的概念是在單擊“ +”按鈕時最多創建20個字段，如果您點擊“ +”按鈕，則可以添加新字段，這已成功完成。。但是現在我的問題是對創建的字段進行驗證在“ +”按鈕上點擊。
我有用於驗證的代碼，但它僅適用於一個領域。任何人都可以幫助我在所有領域中工作。 這是我的示例代碼。
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jQuery - v1.11.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#myform').validate({
rules: {
userid: {
required: true,
},
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
</script>
<script>
var field = 1;
function add_fields()
{
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div><input type="text" name="userid " id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest)
}
</script>
</head>
<body>
<form id="myform">
<input type="button" id="more_fields" onclick="add_fields();" value="+" />
<div id="room_fileds">
<div class="label">Field 1:</div>
<input type="text" name="userid" id="userid" maxlength="50" placeholder="User ID" class="userid"/><br>
</div>
<input type="submit" />
</form>
</body>
</html>
看起來驗證不適用於動態添加的輸入。
為此，您需要通過以下方式為新創建的輸入添加規則
$('input').rules('add', 'required')
在添加字段方法中，您將必須重新驗證表單並添加新規則。
<script>
var field = 1;
function add_fields()
{
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div> <input type="text" name="userid " id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest);
$('#myform').validate();
$("input#userid" + field).rules("add", "required");
}
</script>
查看文檔
指望您將div添加到添加更多按鈕上：
function add_fields() {
var apendedDivCount = 1;
apendedDivCount = document.querySelectorAll('.userid').length; // Count of appended div with class "userid"
if (apendedDivCount < 21) { // Condition to allow maximum 20 userid class div
field++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="label">Field '+ field +':</div>
<input type="text" name="userid" id="userid' + field +'" maxlength="50" placeholder="User ID" class="userid"/></div>';
objTo.appendChild(divtest);
} else {
alert ("You can't add more than 20");
}
}
敲除驗證：如何驗證按鈕單擊時的字段，而不是輸入更改
[英]Knockout Validation: how to validate the fields on button click, not on input change
如何觸發位置絕對驗證引擎功能以驗證按鈕單擊時的字段？
[英]How to trigger Position Absolute validation engine function to validate the fields on button click?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.