...

View Full Version : Input box validation



Cicatriz
12-10-2004, 01:51 PM
Hi, I'm currently in quite a pickle. I need to design and make a programme in javascript and html which changes the foreground and background colour of a frame when values are entered in 3 boxes. The programme works fine......
EXCEPT, when i enter a decimal in the input box, ie, 24.4, It still accepts it. I need to get rid of this, can someone help?

I was told that i could do this with charAt(), so ive reritten a bit of my code to try and get it working... it's as follows

var redbox=0;
var greenbox=0;
var bluebox=0;
var i;
var bool;
var validchars="0123456789";

function changeColour(colour){
redbox=colour.Red.value;
greenbox=colour.Green.value;
bluebox=colour.Blue.value;
for(i=0; i<=255; i++){
if ((redbox == validchars.charAt(redbox))){bool="true";}
else{
bool= "false";}
}
if (bool=="true"){
parent.body.document.bgColor="rgb("+redbox+","+greenbox+","+bluebox+")";
parent.body.document.fgColor="rgb("+(255-redbox)+","+(255-greenbox)+","+(255-bluebox)+")";}
else if (bool=="false")
{
alert("You have entered incorrect integers, please enter values BETWEEN 0 and 255");}
}

Im just trying it with the redbox at the moment, it works, excepet it only accepts numbers between 1-9. And I need the input box to accept anything between 0-255, hence to "255" in the for statement.

Can someone please help me with trying to get this to accept numbers between 0-255?

Kor
12-10-2004, 02:05 PM
You may try validate for numbers onkeyup:


<script language="JavaScript" type="text/JavaScript">
function isNumber(field) {
var re = /^[0-9]*$/;
if (!re.test(field.value)) {
alert('Value must be an integer number!')
field.value = field.value.replace(/D/g,"");
}
if(Number(field.value)>255){
alert('Value must be between 0 and 255!')
field.value ='';
field.focus();
}
}
</script>
...
<input name="Red" type="text" onkeyup="isNumber(this)">
<input name="Breen" type="text" onkeyup="isNumber(this)">
<input name="Blue" type="text" onkeyup="isNumber(this)">

Cicatriz
12-10-2004, 03:41 PM
Thanks a lot, but I seriously wouldn't know how to implement that into my programme. Do you know how I could do the same thing with charAT();??

Kor
12-10-2004, 04:47 PM
how to implement that into my programme


But is quite simple


var re = /^[0-9]*$/; //this is a checking variable for numbers
if (!re.test(field.value)) {//if the field value doesn't match (if there isanything else than a number character input
alert('Value must be an integer number!')
field.value = field.value.replace(/D/g,"");//removes the last character
}
if(Number(field.value)>255){//if the value transformed in number is higher than 255
alert('Value must be between 0 and 255!')
field.value ='';//clears the field
field.focus();//focuses the field
}
}


Why using such an intricate and long code with charAt? It is nonsense, I reckon...

Cicatriz
12-10-2004, 05:50 PM
Ok, I tried to implement that and it worked quite well and displayed errors when i entered a '.' or a space or anything above 255.... but :( it changed the colour of the frame regardless if an error appeard or not. Can you see anything wrong with what i've done?



<script language="javascript" type="text/javascript">
<!--

var redbox=0;
var greenbox=0;
var bluebox=0;
var i;
var bool;
var validchars= /^[0-9]*$/;

function changeColour(colour){
redbox=colour.Red.value;
greenbox=colour.Green.value;
bluebox=colour.Blue.value;
var re = /^[0-9]*$/;

if (!re.test(redbox)) {//if the field value doesn't match (if there isanything else than a number character input
alert('Value must be an integer number!')
redbox = redbox.replace(/D/g,"");//removes the last character
}
if(Number(redbox)>255){//if the value transformed in number is higher than 255
alert('Value must be between 0 and 255!')
redbox ='';//clears the field
redbox.focus();//focuses the field
}

parent.body.document.bgColor="rgb("+redbox+","+greenbox+","+bluebox+")";
parent.body.document.fgColor="rgb("+(255-redbox)+","+(255-greenbox)+","+(255-bluebox)+")";}

//-->
</script>

Kor
12-10-2004, 05:53 PM
try
...
else{
parent.body.document.backgroundColor='rgb(redbox,greenbox,bluebox)';
parent.body.document.foregroundColor='rgb('+(255-redbox*1)+','+(255-greenbox*1)+','+(255-bluebox*1)+')';
}
}

Kor
12-10-2004, 06:12 PM
You have to rewrite all the code

- using this as a parameter to pe passed to function as a substitute for the element using the event handler, not a particular name of the element
- kepping in mind that the form's elements' values are strings, not numbers
- using else to change the bacgroundcolors
- the correct on the fly attributes are
backgroundColor and foregroundColor

Cicatriz
12-10-2004, 07:42 PM
Now it kinda works. Basically you can enter the values 0-255 and it will change colour. if you enter a number with a decimal it will produce an error message and then change colour. If you enter something over 255 it will produce and error message and change colour... but at the bottom left of the screen it says there's an error in the page... something like..
line 33
expected '.'

here is the whole document...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
H2 {color: yellow;font-family: arial}
body {color: yellow;font-family: arial}
-->
</style>
<title>
Colour Selector
</title>
<script language="javascript" type="text/javascript">
<!--

var redbox=0;
var greenbox=0;
var bluebox=0;

function changeColour(colour){
redbox=colour.Red.value;
greenbox=colour.Green.value;
bluebox=colour.Blue.value;
var re = /^[0-9]*$/;

if (!re.test(redbox)) {//if the field value doesn't match (if there isanything else than a number character input
alert('Value must be an integer number!')
redbox = redbox.replace(/D/g,"");//removes the last character
}
if(Number(redbox)>255){//if the value transformed in number is higher than 255
alert('Value must be between 0 and 255!')
redbox ='';//clears the field
}
else {
parent.body.document.bgColor="rgb("+redbox+","+greenbox+","+bluebox+")";
parent.body.document.fgColor="rgb("+(255-redbox)+","+(255-greenbox)+","+(255-bluebox)+")";}
}
//-->
</script>
</head>

<body background="cloudy.jpg">

<center>
<h2><i><u>Colour Selector</u></i></h2>
</center>

<hr />

<hr />

<br />

<table border="3">
<tr>
<td><p align="center"><i>Enter values between 0 and 255 in the boxes below, then click on the change
"colour change" button to see the effects...</i></p></td>
</tr>
</table>

<br />

<form action="#">
<table border="2" width="335">
<tr>
<td><b>Red =</b></td>

<td><input type="text" name="Red" value='0' /></td>
</tr>

<tr>
<td><b>Green =</b></td>

<td><input type="text" name="Green" value='0' /></td>
</tr>

<tr>
<td><b>Blue =</b></td>

<td><input type="text" name="Blue" value='0' /></td>
</tr>
</table>

<br />
<br />

<table border="2" width="335">
<tr>
<td><center><input type="button" name="colour" value="Change Colour" onclick="return changeColour(this.form)"/></center></td>
</tr>
</table>
</form>
</body>
</html>

Cicatriz
12-10-2004, 07:49 PM
I managed to sort out the >255 problem by making it an else if...


}
else if( redbox <=255){
parent.body.document.bgColor="rgb("+redbox+","+greenbox+","+bluebox+")";
parent.body.document.fgColor="rgb("+(255-redbox)+","+(255-greenbox)+","+(255-bluebox)+")";}
}

now i just have to figure out how to stop it for changing colour when a . is entered. Maybe if I said in the same if else statement, something like
if it is equall to the characters in validchars then change the colour. Do u know of how i could do this?


maybe....


}
else if(( redbox <=255) || (redbox == re)){
parent.body.document.bgColor="rgb("+redbox+","+greenbox+","+bluebox+")";
parent.body.document.fgColor="rgb("+(255-redbox)+","+(255-greenbox)+","+(255-bluebox)+")";}
}

:confused: :confused: :confused: :confused:

thanks for the help by the way

Kor
12-12-2004, 08:22 PM
I'll try tomorrow to solve your problem, Till that, you seemed to have not noticed what i have told you

parent.body.document.backgroundColor
not
parent.body.document.bgColor

Even better would be
parent.document.getElementsByTagName('body')[0].backgroundColor

Cicatriz
12-16-2004, 08:40 PM
oops, I forgot to tell you that I managed to fix it by adding

== re in the if statment
Thanks a lot for the help :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum