检查动态 childnod 值

Question

我正在尝试验证包含动态元素的表单。我的表单包含两个用于手机和电子邮件的文本输入。如果需要，用户可以动态添加更多字段。问题是我无法验证 appendchilds 创建的子值。这是验证器代码：

function Checkchildlist(){
c = document.getElementById("mobiles").childNodes; 
     var txt = "";

    var i;
    for (i = 0; i < c.length; i++) {
        txt = txt + c[i].nodeName + "<br>";

        var mob= document.getElementById("mobile"+i).value;
        if(mob != "0937"){
            document.getElementById("mobile"+i).classList.remove("tru")
            document.getElementById("mobile"+i).classList.add("err")
        }else{
            document.getElementById("mobile"+i).classList.remove("err")
            document.getElementById("mobile"+i).classList.add("tru")    
        }


    }


 }

它只适用于第一个元素。我尝试了许多其他方法但没有成功。完整代码在这里：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
    .content-box{
        margin: auto 20px;
        border:solid 1px #1B50E1;
        width: 300px;
    }

    li{
        display: block;
        margin: 5px;
    }
    .tru{
        border:solid 3px #0E9609;
    }
    .err{
        border:solid 3px #F50D11;
    }

    </style>
<script language="javascript">
        var mobile=0;
function addfield(args){
if(args == "mobiles"){
    mobile++;
    var idcounter="mobile" + mobile;
}

    var x = document.createElement("li");
    x.id=idcounter;
    y=document.createElement("input");
    document.getElementById(args).appendChild(x);
    x.innerHTML="<input type=\"text\" id=\""+idcounter+"\" onblure=\"mobilecheck('"+idcounter+"')\" class=\"txtfield\" placeholder=\"mobile\">";
//  record ++;
}
 function Checkchildlist(){
c = document.getElementById("mobiles").childNodes; 
     var txt = "";

    var i;
    for (i = 0; i < c.length; i++) {
        txt = txt + c[i].nodeName + "<br>";

        var mob= document.getElementById("mobile"+i).value;
        if(mob != "0937"){
            document.getElementById("mobile"+i).classList.remove("tru")
            document.getElementById("mobile"+i).classList.add("err")
        }else{
            document.getElementById("mobile"+i).classList.remove("err")
            document.getElementById("mobile"+i).classList.add("tru")    
        }


    }


 }
    </script>


<div class="content-box">   
<form id="myform" action="index.php">
<ul>
<li>
    <input type="text" id="mobile0" name="mobile[]" placeholder="mobile number"><a href="#" onClick="addfield('mobiles')"><font class="char">&#43;</font></a>
    </li>
    <li id="mobiles"> </li>
<li>
        <input type="text" id="email" name="emails[]" placeholder="email"><a href="#" onClick="addfield('email')"><font class="char">&#43;</font></a>
    </li>
    <li>
        <input type="button" value="next" id="next" onClick="Checkchildlist()">
    </li>
    </ul>
</form>
    </div>
    <div id="show">

    </div>
</body>
</html>

Answer 1

你的问题是你有重复的 id（li 和内部 input），所以你的 document.getElementById("mobile"+i) 检查混淆了。

添加新项目的正确代码（删除x.id=idcounter;）：

function addfield(args) {
  if (args == "mobiles") {
    mobile++;
    var idcounter = "mobile" + mobile;
  }

  var x = document.createElement("li");
  y = document.createElement("input");
  document.getElementById(args).appendChild(x);
  x.innerHTML = "<input type=\"text\" id=\"" + idcounter + "\" onblure=\"mobilecheck('" + idcounter + "')\" class=\"txtfield\" placeholder=\"mobile\">";
  //  record ++;
}

检查动态 childnod 值

check dynamic childnod values

javascript

appendchild