2015-09-04 131 views
1
<!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> 

我想在每个输入字段之后动态显示图像以显示刻度或交叉符号。但是当我这样做时,它将图像放在提交按钮后的最后一步是什么是在每个输入字段之后动态地放置图像的正确过程。我的意思是我做了一个函数,稍后我会在进行验证时调用它。不。动态地制作元素和标签,并在其上应用Cs并在每个输入字段后显示在页面上。如何通过Javascript动态地放置图像元素

回答

2

在需要传递的参考在此之后被插入像

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")); 
+0

http://jsfiddle.net/arunpjohny/gnae5aLj图像输入字段这种情况下/ –

+0

感谢兄弟.....其工作...非常感谢。 –

+0

我们可以动态创建一个问题...我将id分配给输入标签的,以后我可以在Focus事件中删除它。但它删除所有因为它分配相同的ID到所有 ..我想删除焦点输入图像。 –