如何验证按钮点击时创建的字段
如何验证按钮点击时创建的字段
提问于 2016-10-20 14:29:37
我的概念是创建最多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>回答 3
Stack Overflow用户
发布于 2016-10-20 14:34:26
看起来验证不适用于动态添加的输入。
为此，您需要通过以下方式为新创建的输入添加规则
$('input').rules('add', 'required')Stack Overflow用户
发布于 2016-10-20 14:36:09
在add field方法中，您必须重新验证表单并添加新规则。
<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>查看documentation
Stack Overflow用户
发布于 2016-10-20 14:36:24
单击“添加更多”按钮时添加的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");
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40146966
复制相关文章
相似问题
腾讯云开发者
