Textbox border change using javascript

[Shantanu88d]

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 !

[McLaren]

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?

[Shantanu88d]

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 !

[haleel]

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>

[Loki_1]

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.

[designershiv]

Simply by jquery

if($('input').val()==" "){
$(this).addClass('whatever');
}