SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing font color if field is not valid

    ok, so the subject says it all

    I have about 70 txt boxes that are being filled in. I have all the validation done for them and it seems OK.

    My next goal is to make the label next to the txt box turn red when the form is submited if the field is invalid.

    just for clarification the page sorta looks like:

    =----
    label one: TEXTBOX1
    label two: TEXTBOX2
    ...
    =----

    Thanks, Ryan
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, for each you can either alter the text with innerHTML

    PHP Code:
    <script type="text/javascript">

    function 
    x()
    {
      
    document.all.a.outerHTML '<font color="red">' document.all.a.outerHTML '</font>';
    }

    </script>

    <div name="a" id="a" onclick="x()">test</div> 
    something along them lines should get you started,

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    grr....

    ok, I tried:
    (all have) <div name="div1" id="div1">text label</div>


    <script type="text/javascript">
    function x()
    {
    document.all.div1.outerHTML = '<font color="red">' + document.all.div1.outerHTML + '</font>';
    }
    </script>
    <script type="text/javascript">
    function y()
    {
    document.getElementByID("div1").outerHTML = '<font color="red">' + document.getElementByID("div1").outerHTML + '</font>';
    }
    </script>

    tried both with .innerHTML tried using .style.color="RED"

    none seem to work. In fact they kill the JS and the page submits; however the page refreshes before I can read the error message IE gives me...

    Please help
    Ryan
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    ok here is the basic framework of what I finally got to work.

    Thanks for the help Andrew!

    Code:
    <html><head>
    <script>
    function validateForm()
    {	for(i=1; i<4; i+=2)
    	{
    		document.getElementById("div" + i).innerHTML =*'<font color="red">changed</font>';
    	}
    	return false;	}
    </script>
    </head><body>
    <form method="post" action="make_me_red.asp" id="submitForm" name="submitForm" onSubmit="return validateForm();">
    <div name="div1" id="div1">MY DIV1</div>
    <input type="txt" size="1" name="DEFECT1" id="DEFECT1" class=""left" value="0">
    <br>
    <div name="div2" id="div2">MY DIV2</div>
    <input type="txt" size="1" name="DEFECT2" id="DEFECT2" class=""left" value="0">
    <br>
    <div name="div3" id="div3">MY DIV3</div>
    <input type="txt" size="1" name="DEFECT3" id="DEFECT3" class=""left" value="0">
    <br>
    <input type="submit" name="submit" value="Submit Defects" id="submit">
    </form></body></html>
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.


Bookmarks

Posting Permissions

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