Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Input box validation

    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?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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)">
    Last edited by Kor; 12-10-2004 at 01:10 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();??

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    how to implement that into my programme
    But is quite simple
    PHP Code:
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


    Code:
    <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>

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try
    ...
    else{
    parent.body.document.backgroundColor='rgb(redbox,greenbox,bluebox)';
    parent.body.document.foregroundColor='rgb('+(255-redbox*1)+','+(255-greenbox*1)+','+(255-bluebox*1)+')';
    }
    }
    Last edited by Kor; 12-10-2004 at 05:03 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by Cicatriz; 12-10-2004 at 06:51 PM.

  • #9
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)+")";}
    }



    thanks for the help by the way

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •