Question

我使用appendChild创建了添加行表单。

每当我点击addrow按钮时，就会形成一行但表单验证不适用于该行。现在我需要验证所有行。请推荐一种方法。

我需要对所有其他插件行进行验证

＆＃13;

var counter = 0;
var limit = 0 / 0;
function addInput(dynamicInput) {
    if (counter == limit) {
        alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br>User:" + " <input type='text' name='user' id='user'> " +
    "Age:" + " <input type='number' name='Age'> " +
    "Qualify:" + " <input type='text' name='qualification' id='qual'> " +
    "Specilztn:" + " <input type='text' name='specialization' id='spec'> " +
    "Percentage:" + " <input type='number' name='percentage' id='perc'> " +
    " <input type='submit' id='subtn2'>";

        document.getElementById(dynamicInput).appendChild(newdiv);
        counter++;
        document.getElementById("removerow").style.display = "block";
    }
}


function removeInput() {
    var x = document.getElementById("dynamicInput");
    if (x.hasChildNodes()) {
        x.removeChild(x.childNodes[14]);
    }
}

function formvalidation() {

    var a = document.getElementById("user");
    var b = document.getElementById("age");
    var c = document.getElementById("qual");
    var d = document.getElementById("spec");
    var e = document.getElementById("perc");

    if (uservalidation()) {
        if (agevalidation()) {
            if (qualvalidation()) {
                if (specvalidation()) {
                    if (percvalidation()) {

                    }
                    else {
                        return false;
                    }
                }
                else {
                    return false;
                }
            }
            else {
                return false;
            }
        }
        else {
            return false;
        }
    }
    else {
        return false;
    }

    function uservalidation() {
        if (a.value == "") {
            document.getElementById("uerr").innerHTML = "Enter UserName";
            document.getElementById("user").focus();
            return false;
        }
        else {
            document.getElementById("uerr").style.visibility = "hidden";
            return true;
        }
    }
    function agevalidation() {
        if (b.value == "") {
            document.getElementById("agerr").innerHTML = "Enter  Age";
            document.getElementById("age").focus();
            return false;
        }
        else {
            document.getElementById("agerr").style.visibility = "hidden";
            return true;
        }
    }

    function qualvalidation() {
        if (c.value == "") {
            document.getElementById("qerr").innerHTML = "Enter Qualification";
            document.getElementById("qual").focus();
            return false;
        }
        else {
            document.getElementById("qerr").style.visibility = "hidden";
            return true;
        }
    }

    function specvalidation() {
        if (d.value == "") {
            document.getElementById("sperr").innerHTML = "Enter Specialization";
            document.getElementById("spec").focus();
            return false;
        }
        else {
            document.getElementById("sperr").style.visibility = "hidden";
            return true;
        }
    }

    function percvalidation() {
        var addrowbtn = document.getElementById("addrow");
        if (e.value == "") {
            document.getElementById("pererr").innerHTML = "Enter Percentage";
            document.getElementById("perc").focus();

            return false;

        }
        else {
            document.getElementById("pererr").style.visibility = "hidden";

            addrowbtn.style.display = "block";

        }
    }
}

＆＃13;

b{
    color:red;
}
#form2{
    display:none;
}
#addrow{
    display:none;
    /* float:right;
        margin-top:20px;
        margin-right:45px; */
    position: absolute;
    top: 8px;
    right: 75px;
    background:green;
    color:white;
    cursor:pointer;   
} 
#removerow{
    display:none;
    background:red;
    color:white;
    cursor:pointer;
    position: absolute;
    top: 8px;
    right: 5px;
}

＆＃13;

<form method="post" id="form1" name="form1" onsubmit="return formvalidation()">
    <div id="dynamicInput">
        User: <input type="text" name="user" id="user">
        Age:  <input type="number" name="age" id="age">
        Qualify: <input type="text" name="qualification" id="qual">
        Specilztn:<input type="text" name="specialization" id="spec">
        Percentage:<input type="number" name="percentage" id="perc">
        <input type="submit" id="sbtn">


        <p>
            <b id="uerr"> </b>
            <b id="agerr"> </b>
            <b id="qerr"> </b>
            <b id="sperr"> </b>
            <b id="pererr"> </b>
        </p>

    </div>
    <input type="button" value="Add Row" id="addrow" onClick="addInput('dynamicInput');">
    <input type="button" value="Del Row" id="removerow" onClick="removeInput();">
</form>

＆＃13;

Answer 1

这里有很多问题。这里有一些提示：

1）当你创建新div时，你没有给它一个id，所以你的验证永远找不到它。

 var newdiv = document.createElement('div');
 newdiv.setAttribute("id", "Div1"); // you can generate the id from your counter

2）你的所有验证都是静态的，所以你的新div没有任何验证，所以现在即使我们给它一个id，也没有找到它的逻辑。您的验证根本不知道有关新div的任何信息。您可以使用新ID添加一些验证：

var div1 = document.getElementById("Div1");
if(div1){ 
// ... validation logic 
}

3）关于验证的另一件事 - 它不需要那么复杂。你有太多内在功能做太多事情。对于formvalidation函数中的每个验证，只做一次这样做会更加清晰，至少：

var user = document.getElementById("user");
if(!user){
        document.getElementById("uerr").innerHTML = "Enter UserName";
        document.getElementById("user").focus();
        return false;
 } else {
        document.getElementById("uerr").style.visibility = "hidden";
 }

appendChild的表单验证

1 个答案: