Resolved Problem validating text area for form

Cha1 · 07-24-2010, 04:33 PM

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

RandomUser531 · 07-24-2010, 05:21 PM

Quote:

Originally Posted by Cha1

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.

Philip M · 07-24-2010, 05:27 PM

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

Cha1 · 07-24-2010, 07:29 PM

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.

Cha1 · 07-24-2010, 07:39 PM

Yep the problem was the whitespace between textarea tags.

Once again Thank you