Hi all,
I am beginner in javascript. I am attempting to change border color and style of a asp.net text box using javascript. The function is inside a .js file. It is as follows.

function checkMoney(controlID)
{
	var control = document.getElementById(controlID);
	var text = control.value;
	var letter;
	if (text == "")  // Avoid validating on onblur when user is still to enter anything
	{
	    return false;
	}
	for(i=0;i<text.length;i++)
	{
	   letter = text.charAt(i);
	   if(!(letter >="0" && letter <="9"))
	   {
         if(letter == ".")
         {	}
		 else
		 {
		     document.getElementById(controlID).focus();
             document.getElementById(controlID).style.borderColor="red";
             document.getElementById(controlID).style.borderStyle="solid";
	         alert("Enter only numbers");                                      
	         return 0;
	     }
	   }
	}  
	document.getElementById(controlID).style.borderStyle=""; 
	return true;                      
}

When error is there, text box is highlighted properly. But when mistake is corrected, border color doesn't return to normal. Please help !

hmm, on what event you are calling this function? Maybe this validation function is callled only once - when data is incorrent, but isn't called antoher time when data is correct?

This issue is Mozilla specific. On IE and Chrome textbox border color returns to normal, but on mozilla it appears as it there is no border !

Please add

document.getElementById(controlID).style.borderColor="";

Before

return true;

Please check the code below.

<input type="text" id="controlID" onblur="checkMoney('controlID')">

<script>
function checkMoney(controlID)
{
	var control = document.getElementById(controlID);
	var text = control.value;
	var letter;
	if (text == "")  // Avoid validating on onblur when user is still to enter anything
	{
	    return false;
	}
	for(i=0;i<text.length;i++)
	{
	   letter = text.charAt(i);
	   if(!(letter >="0" && letter <="9"))
	   {
         if(letter == ".")
         {	}
		 else
		 {
		     document.getElementById(controlID).focus();
             document.getElementById(controlID).style.borderColor="red";
             document.getElementById(controlID).style.borderStyle="solid";
	         alert("Enter only numbers");                                      
	         return 0;
	     }
	   }
	} 
	document.getElementById(controlID).style.borderColor=""; 
	document.getElementById(controlID).style.borderStyle=""; 
	return true;                      
}
</script>

wont use the ID , would rather use class' EXTENSIBILITY!
and would definitely use jQuery alongside standard js.

HTML:
<input type="text" id="controlID" class="whateverClass">

CSS:
.whateverClass{ border:1px solid #f00; }

JS:

document.getElementById('whateverClass').onchange = function (e) {
    var $this = $(this);
    var cID = $this.attr("id");
    var xVal = document.getElementById(cID).value;

    if(xVal == undefined || xVal == ''){
        $(('#' + cID)).addClass("whateverClass");
    }
    else if(xVal != undefined || xVal != ''){
        $(('#' + cID)).removeClass("whateverClass");
    }
}

THIS WORKS EVERYWHERE.
There is no thing as Mozilla , Chrome , IE , Safari Specific!

It's all about ECMAScript engines!
In other words:
It's Chakran , Chakra, SpiderMonkey , SquirrelFish , V8 , JavaScriptCore etc.

Note Safari is a webkit browser, Chrome is too, but wait js functions a bit different here and there between them? Cause one is running V8 and the other JavascriptCore.

It is worth a Read to note the differences, it saves HOURS of unneccesary debuging on debugging on debugging.

ECSMAScript
All about Browsers
Happy Coding.

Simply by jquery

if($('input').val()==" "){
$(this).addClass('whatever');
}
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.