JQuery Text Field Validation HELP URGENT!

[angelali]

Greeting world! I have a problem in JQuery when validating a text field to alert the user that he or she cannot type less than 20 characters. Here are my codes:

JQuery:

<script type="text/javascript">
$(document).ready (function () {
$('#form').hide();
$('#imageclick img').click(function () {
$('#form').slideToggle('slow');
$('.fullname').focus();
var fullname = $('.fullname').val();
var emailaddress= $('.emailfield').val();
var comments = $('.messagetext').val();
$('.sendmessage').click(function () {
if ((fullname =='') || (emailaddress =='') || (comments =='')){
alert ("Please, all fields are required, make sure you have not missed any of them, thank you!");
return false;
} else if
((fullname.length < 20) || (comments.length < 20)) {
alert ("A minimum of 20 chracters must be entered in both the name and message fields to send the message!");
return false;
} else {
return true;
}
});
});
});
</script>

HTML:

<div id="form">
<form action="#" method="post" class="formcontact">
<p>Enter your full name (Required):</p>
<p><input type="text" size="35" name="name" class="fullname"/></p>
<p>Enter your email address (Required):</p>
<p><input type="text" size="35" name="email" class="emailfield"/></p>
<p class="ee"></p>
<p>Enter your message (Required):</p>
<p><textarea name="comments" cols="50" rows="10" class="messagetext"></textarea></p>
<input type="submit" value="Send" name="submit" class="sendmessage"/>
<input type="reset" value="Reset" name="Reset" class="resetall"/>
</form>
</div>
<br/>
<div id="imageclick">
<img src="images/contact.png" width="190" height="80" alt="contact" />
</div>


As you have noticed above, when I click on an image the form will be toggle then the user will fill the form. I have successfully made a validation where if all the fields are empty, an alert will be displayed, however, when I make the validation for the FULLNAME and TEXTAREA fields to tell the user to not insert less than 20 characters, the validation is not working. Can you help me?

[MarPlo]

The error is that you get the form fields when the image is clicked, so, the fields not completed.
But you must get the fields when the button is clicked.
Try this:

<script type="text/javascript">
$(document).ready (function () {
$('#form').hide();
$('#imageclick img').click(function () {
$('#form').slideToggle('slow');
$('.fullname').focus();
$('.sendmessage').click(function () {
var fullname = $('.fullname').val();
var emailaddress= $('.emailfield').val();
var comments = $('.messagetext').val();
if ((fullname =='') || (emailaddress =='') || (comments =='')){
alert ("Please, all fields are required, make sure you have not missed any of them, thank you!");
return false;
} else if
((fullname.length < 20) || (comments.length < 20)) {
alert ("A minimum of 20 chracters must be entered in both the name and message fields to send the message!");
return false;
} else {
return true;
}
});
});
});
</script>

[angelali]

Hello, I have successfully did it. By the way, I want to know how to validate a textbox with JQuery. I want a textbox with the class ".fullname" to contain ONLY characters NOT numbers. Can you help me?