如何验证在单击按钮时创建的字段

Question

我的概念是在单击“ +”按钮时最多创建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>

Answer 1

看起来验证不适用于动态添加的输入。

为此，您需要通过以下方式为新创建的输入添加规则

$('input').rules('add', 'required')

Answer 2

在添加字段方法中，您将必须重新验证表单并添加新规则。

<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>

查看文档

Answer 3

指望您将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");
 }
}

如何验证在单击按钮时创建的字段

问题描述

3 个解决方案

解决方案1
2 2016-10-20 06:34:26

解决方案2
2 2016-10-20 06:36:09

解决方案3
1 2016-10-20 06:36:24

如何验证在单击按钮时创建的字段

问题描述

3 个解决方案

解决方案1 2 2016-10-20 06:34:26

解决方案2 2 2016-10-20 06:36:09

解决方案3 1 2016-10-20 06:36:24

解决方案1
2 2016-10-20 06:34:26

解决方案2
2 2016-10-20 06:36:09

解决方案3
1 2016-10-20 06:36:24