Onfocus and onblur

[Jon W]

The title pretty much says it all. I'm trying to develop a script when its focused and when it goes then onblur if the value is empty it will change the text color of the title of the input.

So normally this was a pretty simple and easy question to answer. Though I guess my biggest problem that I'm facing right now is that I'm trying to do all this for all of my inputs on this form into one function. I would perfer not have to put it in any function but I don't yet have enough knowledge to know how to do that yet... So here is my code.

	<script type="text/javascript">
		
		function chckFields(){
			
		var addMMO = document.addMMO;
		var empty = '';
			
			if (addMMO.gametitle.value == empty) {
				document.getElementById('gametitle').style.color = 'red';
			}
			else
			 {
			 	document.getElementById('gametitle').style.color = 'green';
			 }
			 
			 if(focus.addMMO.os.value == 0) {
			 	document.getElementById('os').style.color='red';
			 }
			 else
				 {
				 document.getElementById('os').style.color='green';	
				 }
		}
	</script>

And here is my html

			<label for="gameTitle" id="gametitle">Game Title: </label>
			<input name="gametitle" onblur="chckFields();" type="text" title="Provide a game title that you are reviewing" />
			
			<label for="os" id="os">Operating Systems: </label>
			<select name="os" onblur="chckFields();">
				<option value="0">Choose</option>
				<optgroup label="------------------------------------">
				<option value="1">Windows</option>
				<option value="2">Mac</option>
				<option value="3">Linux</option>
				<option value="4">Windows . Mac</option>
				<option value="5">Windows . Mac . Linux</option>
				<option value="6">Linux . Mac</option>
				<option value="7">Windows . Linux</option>
				</optgroup>
			</select>

So the problem is that since all of these are in one function as soon as the first one acts it goes and checks all of them before the user has even got the chance to click on them. So the way that it's sets now if you were to click on the first input and then click away off of the input the game title and the OS title would turn red.

My goal was to do it for each and every input. So if you clicked on the first one and then left it without filling anything in it would turn the text red and stay red until you filled something in, and if you went down to the other one and just click the select box and left without selecting anything then it would turn red. I do not when you just click on one they all turn red.

Do you follow me?

So first thought was well I could put then inside of separate functions. But then I thought that would be a little crazy making a new function for each and every one of my inputs. There has to be a better way.... What is the cleanest and more effective way to do this?

[Spudhead]

Well, seeing as you've posted this in the "Javascript Frameworks" section, then I'll start by saying that the cleanest and most effective way do to it is using a Javascript framework of some kind. My personal suggestion would be jQuery. More specifically, the fantastically useful jQuery validation plugin.

As a quick and dirty example of how it could work in jQuery:

$(document).ready(function() {

	$('input').blur(function(){
		var color = ($(this).val() == "") ? "red" : "green";
		$(this).prev("label").css("color", color);
	});

});