SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Form Value Text Color Validation

    Hi All,
    This is a tricky one.
    I'm also relatively new to javascript programming,so don't be-head me.

    What I have right now is when someone hits submit,text appears next to the textarea that says..Please enter an email..That all works fine,but what I would like to do is have the value that I have in the textfield,that has a text style applied from my style sheet(now grey) to turn red,maybe if I made another style inside the CSS file which would be for red text.
    Would that be possible? to have one style in the css file,change to another with the javascript?
    Here's the validation part of my javascript code
    Code:
    //Show & Hide div
    function toggleDetails(theDiv) {
    	var currentStyle = document.getElementById(theDiv).style;
    	currentStyle.display = currentStyle.display? "":"block";
    }
    
    //Check if text field empty
    function isEmpty(theTextField) {
       if ((theTextField.value.length==0) || (theTextField.value==null)) return true;
       else return false;
    }
    
    //Send form
    function sendForm() {
    	var contactForm = document.forms[0];
    	var submitError = false;
    	if (isEmpty(contactForm.email)) {
    		document.getElementById("email-error").innerHTML = "Please type your e-mail address";
    		submitError = true;	
    	}
    	if (isEmpty(contactForm.message)) {
    		document.getElementById("message-error").innerHTML = "Please type your message";
    		submitError = true;	
    	}
    And for the form
    Code:
    <form action="" method="post" name="form1" id="form1">
          <input name="textfield" type="text" class="bodytext" value="Name" tabindex="1" onfocus="if (this.value=='Name'){this.value='';};return false;" onblur="if (this.value==''){this.value='Name';return false;}"/>
    
    <br><br>
    <input name="textfield2" type="text" class="bodytext" value="Your Email" tabindex="2" onfocus="if (this.value=='Your Email'){this.value='';};return false;" onblur="if (this.value==''){this.value='Your Email';return false;}"/>
    
    <br><br>
    <input name="textfield3" type="text" class="bodytext" value="Subject" tabindex="3" onfocus="if (this.value=='Subject'){this.value='';};return false;" onblur="if (this.value==''){this.value='Subject';return false;}"/>
    
    <br><br>
    <textarea name="textarea" cols="30" rows="5" wrap="VIRTUAL" class="bodytext" tabindex="4" onfocus="if (this.value=='Your Message'){this.value='';};return false;" onblur="if (this.value==''){this.value='Your Message';return false;}">Your Message</textarea>
    <br><input type="image" name="sendbtn" id="sendbtn" class="sendbtn" src="sendbtn.gif" onclick="sendForm()" style="border-width:0px;" />
        </form>
    Ps.It's one of those forms where when you click in the textfield the value dissapears, then if no value has been entered and they click somewhere else it goes back to the predefined value. I would like it to if validation fails the predefined value would turn red,and then if they started typing in the field that failed validation it would go back to regular color, if that's possible.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change the CSS class of an element by using the className property:
    Code:
    contactForm.email.className = 'red';


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
  •