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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem validating text area for form

    Hi, I'm a student learning web design and having a problem with some javascript code, I'm validating a text area, i dont have a problem limiting how many characters can be typed in the textarea, but I cant get it to give an error if there is no text in the text area.
    In the code below the validateMes() function is not working, the other functions work fine


    Javascript code:
    Code:
    function validateLimit(fld){
    	  
    	  var error ="";
    	  
    	 
    	  if(fld.value.length > 300){
    		 error = "Cannot exceed 300 characters.\n"
    		  fld.style.background = 'Yellow';
    	  
    	  }else{
    		  fld.style.background = 'White';  
    		  
    	  }
    	  return error;
      }
      
      
      function validateMes(fld) {  //this function not working
        var error = "";
     
        if (fld.value.length == 0) {
            fld.style.background = 'Yellow'; 
            error = "The Message field has not been filled in.\n"
        } else {
            fld.style.background = 'White';
        }
        return error;  
    }
    
     function validateFormOnSubmit(form1) {    //master validating function
    var reason = "";
    
      reason += validateLimit(form1.mess);
      
      reason += validateMes(form1.mess); 
          
      if (reason != "") {
        alert("Some fields need correction:\n" + reason);
        return false;
      }else{
    alert("Message has been submitted");
      return true;
      
      }
    }
    Html form code:

    Code:
    <form name="form1" id="form1"  onsubmit="return validateFormOnSubmit(this)" >  
             
    <div class="box">            
     <h1>CONTACT FORM :</h1>             
     <label>                
     <span>Full name</span>                
     <input type="text" class="input_text" name="name" id="name" value=""/>             
     </label>              
     <label>               
      <span>Email</span>                
      <input type="text" class="input_text" name="emailbox" id="emailbox" value=""/>             
      </label>              
      <label>                
       <span>Subject</span>                
        <input type="text" class="input_text" name="subject" id="subject" value=""/>            
         
         </label>             
         
         <label>                 
         <span>Message</span>                 
         <textarea class="message" name="mess" id="mess"  ></textarea>  <span>*Message limited to 300 characters</span>            
         
          <input type="submit" class="button" value="Submit Form" />           
            </label>                    
                          
            </div>     
            </form>

    I can't see what I'm doing wrong, would really appreciate some help

    Thanks
    Last edited by Cha1; 07-24-2010 at 07:42 PM.

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by Cha1 View Post
    Hi, I'm a student learning web design and having a problem with some javascript code, I'm validating a text area, i dont have a problem limiting how many characters can be typed in the textarea, but I cant get it to give an error if there is no text in the text area.
    That code works; you probably had a newline or whitespace between the <textarea> tags.

  • Users who have thanked RandomUser531 for this post:

    Cha1 (07-24-2010)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Hmmm.. it works for me in IE and FF! But if (fld.value.length == 0) { barely counts as validation as even a single space or a ? will return false, that is pass the validation.

    The user cannot tell whether he has exceeded your limit of 300 characters until he submits the form. It would be better if he was warned as soon as the limit was reached (or as the limit is approached). Also, Line Feed/Carriage Return (and some others) counts as two characters. You may care to use this:-

    Code:
    <html>
    <head>
      
    <script type="text/javascript">
    var key;
    function testkey(ev) {	
    ev = ev || event;
    key = ev.keyCode;
    }
    
    var oddchars = 0;
    function updatelen(event){
    var text = document.getElementById('text_box').value;
    if (key == 50 ||  key == 191 || key == 192 || key == 220) {
    // chars \ / " ' count two - but so do 2 | ? @ (same keycodes)
    oddchars ++;
    }
    if (key == 8) {oddchars --}  // backspace
    if (oddchars < 0) {oddchars = 0}
    var remaining = 200 - text.length - oddchars;
    if (remaining < 0) {remaining = 0}
    document.getElementById('tbm').innerHTML = "Characters remaining: " + remaining;
    if (remaining == 0) {
    text = text.substr(0,(200 - oddchars));
    document.getElementById("text_box").value = text;
    alert ("You have now used the maximum number of characters allowed! ");
    }
    }
    </script>
    </head>
    
    <body>
    
    <p id="tbm">Characters remaining: 200</p>
    <textarea id="text_box" cols="60" rows="4" onkeyup="testkey(event); updatelen(event);"></textarea>
    
    </body>
    </html>
    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 07-24-2010 at 05:42 PM.

  • Users who have thanked Philip M for this post:

    Cha1 (07-24-2010)

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks very much for the replies guys, I'm still very much a greenhorn at this so every bit of advice helps. I'll mess around with my code until I get it right.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yep the problem was the whitespace between textarea tags.

    Once again Thank you


  •  

    Posting Permissions

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