Member Avatar for k2k

hi, i am picking up js for form validation. does anybody know how i can add a little check (a tiny image) to the textbox if the content is passed ... and a cross mark maybe if the textbox content failed.

it would be great if someone may just shoot a line of code really quick... thanks very much

below is the code checking a password field.... how do i add an image next to the textbox if it passed the criteria?.....

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" type="text/css" href="css/indexCss.css"/> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Try</title>
        
            <script language="javascript">
			function validator(pass)
			{
				var str
				str = pass                   // <!--prompt("enter a password here.")-->
				var chr = "" 
				var nDigits = 0 
				var nAlphaUpper = 0
				var nAlphaLower = 0 
				var length = str.length
				
				for(position = 0; position <= str.length; position++)
				{
					chr = str.charAt(position)
					
					if(chr >= "0" && chr <= "9")
					{
						nDigits++;
					}
					
					if(chr >= "A" && chr <= "Z" )
					{
						nAlphaUpper++
					}
					
					if(chr >="a" && chr <= "z")
					{
						nAlphaLower++
					}
					
					
				}
				
				if( (length > 5 && length < 14) && (nAlphaUpper > 1) && (nAlphaLower > 1) && (nDigits > 1))
				{
					//document.writeln("Pass")
					alert("Your password met our requirement.")
					
					return true
				}
				
				else 
				{
					alert("Your password does NOT our password requirement.")
					
					return false
				}	
					
			}
		</script>
	</head>
	
	<body>
    	
    
    
    	<!--
		<script Language="javascript">
		
			x= Math.floor(Math.random()*4)
			document.write(x)
			document.write("     <img src=\"   ")
			document.write("pic")
			document.write(x)
			document.write(".jpg")
			document.write(" \"/>  ")
		</script>
		
    	<script>
			now = new Date()
			//hour = now.getHours()
			hour = window.prompt("Enter hour here.")
			
			if(hour >=0 && hour <=5)
			{
				document.writeln("Good Night.")
			}
			
			else if(hour >=6 && hour<=11)
			{
				document.writeln("Good morning.")
			}
			
			else if(hour>=12 && hour<=17)
			{
				document.writeln("Good Afternoon")
			}
			
			else
			{
				document.writeln("Good Evening")
			}
			
		</script>
        -->
        <!--
        <script>
			strA = "Hello"
			strB = "Goodbye"
			strC = "after"
			
			if(strA > strC && strA < strB && strB > strC )
			{
				document.write(strA + "," + strB+ "," + strC)
			}
			
			else
			{
				document.write(strC+ "," + strB + "," + strA)
				
			}
           
		</script>
        -->
        
  		<form name="passwordForm" onSubmit=" return validator(this.passField.value)">
        	<input type="text" name="passField"  />
            <input type="submit"  />
        </form>
        
        
        
        
	</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by oakleymk
Member Avatar for ShawnCplus

Place an empty span next to the inputs and then instead of alert("Your blah met our requirements."); do something like

<input id="passField" name="passField" type="text" /><span></span>
var checkdiv = document.getElementById('passField').nextSibling;
checkdiv.innerHTML = "<img src='somecheckpassimage.jpg' alt='OK' title='OK' />";
Member Avatar for oakleymk

That is a good way to handle it if you are wanting to insert an <img /> tag. A faster rendering method would be to place the image tag directly next to the input field like so:

<input id="passField" name="passField" type="text" /><img id="passFieldImg" src="blankimg.gif" />

You can then change the image in your validation function using:

if( /*PASS CONDITION*/ ){
  document.getElementById('passFieldImg').src="pass.gif"
}
else{
  document.getElementById('passFieldImg').src="fail.gif"
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.