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?