Question

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

<body>
<form name="form" id="form">
<label style="font-size:18px"><strong> Name</strong> </label><br><br><div id="error"> </div>
<input type="text" id="fname" name="fname" placeholder="First Name" pattern="[a-zA-Z\s]{0,10}" onBlur="fvalidity()" onFocus="Focus()">; 
<input type="text" id="lname" name="lname" placeholder="Last Name" pattern="[a-zA-Z\s]{0,10}" onBlur="lvalidity()">
<input type="submit">
</form>


</body>
</html>
<script>
function fvalidity()
{
    var txt="";
    if( document.getElementById("fname").validity.patternMismatch)
    {
        txt="*Only Alphabet max 10 Characters.";
    }
    if(document.getElementById("fname").value=="")
    {
        txt="Field is Empty!!";
    }
    if(txt!="")
    {
        img();
        var s=document.getElementById("error");
        s.innerHTML=txt;
        s.style.visibility="visible";
    }
}
function img()
{
    var sample=document.createElement("img");
    var t= document.createAttribute("src");
    t.value="../cross_script.png";
    sample.setAttributeNode(t);
    var id=document.createAttribute("id");
    id.value="img";
    sample.setAttributeNode(id);
    document.getElementById("form").appendChild(sample);

}
</script>

我想在每个输入字段后动态放置图像以显示Tick或Cross符号。但是，当我这样做时，它将图像放在提交按钮后的最后一个是什么是动态地在每个输入字段后放置图像的正确程序。我的意思是我创建一个函数，后来我在进行验证时调用它。不。动态地制作元素和标签并在其上应用Cs并在每个输入字段后显示在页面上。

Answer 1

在这种情况下，您需要将引用传递给输入字段，然后插入要插入的图像，如

function img(target) {
    var sample = document.createElement("img");
    sample.src = "../cross_script.png";
    document.getElementById("form").appendChild(sample);
    if (target.nextSibling) {
        target.parentNode.insertBefore(sample, target.nextSibling)
    } else {
        target.parentNode.appendChild(sample)
    }
}

然后

img(document.getElementById("fname"));

如何通过Javascript动态地放置图像元素

1 个答案: