SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If form validation failed change label color problem.

    Hello All

    I'm trying to get a label to turn red if it's associated field fails validation but All I manage to do is turn the text of the text field red (which I would rather stayed black).

    Here's my javaScript code, any suggestions?

    Code:
    function validate_form_main ( )
    {
    
    	valid = true;
    
            if ( document.formmain.amount.value == "" )
            {
                    alert ( "Please enter an amount." );
    		document.formmain.amount.style.color = "#FF0000";
                    valid = false;
    				return false;
            }		
            return valid;
    }
    And here's a snippet from my form, note all other validation works and as I say form field text turns red so it's not that the script is failing to run.

    HTML Code:
    <label for="amount">Amount:</label>
    <input type="text" name="amount" id="amount" value="<?php echo
     $_SESSION['sessamount']; ?>"><img src="images/asterisk.gif" border="0"
     alt="Mandatory" title="Mandatory" class="mandatory" />
    Hope some one can help.

    Cheers

    Paul

  2. #2
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best solution that I can think of off the top of my head is to put a DIV tag with an 'id' attribute inside of the label tag, like so:

    HTML Code:
    <label for="amount"><div id="label_amount">Amount:</div></label>
    Then, in your Javascript code, you should be able to change the color of the text within the label tag like so:

    Code:
    document.getElementById('label_amount').style.color = "#FF0000";
    I hope this helps...
    Patrick Smith
    PHP Programmer

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logitron View Post
    The best solution that I can think of off the top of my head is to put a DIV tag with an 'id' attribute inside of the label tag, like so:

    HTML Code:
    <label for="amount"><div id="label_amount">Amount:</div></label>
    Why not give the label the id?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div>s and other block-level elements are not allowed inside inline elements, like <label>s and <a>s.

    The simplest solution is to give an ID to the <label>.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •