JQuery PHP Contact Form

[boyee007]

hi all,
im new in this forum.
i know.. this might be easy question for you. im just bit noob in jscript.
ive got this contact form from website tutorial.

here we go:
I want the error message (CSS Default label.error) showing in motion.
if you know what i mean? lets say, when the user enter wrong email address
the message sliding down (animated) not just appear in constant.

the picture message sample is below..
my sample website can been seen.
http://www.ypsingosari.com/test/contactsgit.php


code im using
JQuery:

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#contact").validate({
		messages: {
			name: 'Please enter your full name',
			email: 'Please enter a valid email address',
			message: 'Please enter your message'
		}		
	});

});
</script>

Contact FORM:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="contact" id="contact">
        <div>
         <?php if(isset($hasError)) { //If errors are found ?>
          <p class="ox">Server Error. Please, try again later!</p>
          <?php } ?>
          <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
          <p class="ok"><strong>Email Successfully Sent!</strong><br>
          Thank you <strong><?php echo $name;?></strong> for using the contact form and we will be in touch with you shortly.</p>
          <?php } ?>
          </div>
   	            <label>Name*: </label>
   	            <input type="text" name="name" id="name" class="required" tabindex="1" minlength="2"><br>
   	            <label> Email*: </label>
   	            <input type="text" name="email" id="email" class="required email" tabindex="2"><br>
   	            <label>Telphone: </label>
   	            <input type="text" name="telp" id="telp" tabindex="3"><br>
   	            <label>Enquiry*:</label>
   	            <select name="enquiry" id="enquiry">
   	              <option selected>General</option>
   	              <option>Database Development</option>
   	              <option>Hardware Maintenance</option>
   	              <option>IT Support &amp; Advice</option>
   	              <option>Software Testing</option>
   	              <option>Web Design &amp; Development</option>
   	              <option>Technical Support</option>
          </select>
   	            <br>
   	            <label>Message*:</label>
   	            <textarea name="message" id="message" cols="45" rows="5" class="required" tabindex="4" minlength="5"></textarea>
   	            <br>
                <label></label>
   	              <input type="submit" name="send" id="send" value="SEND" tabindex="5">
   	              <input type="reset" name="reset" id="reset" value="RESET" tabindex="6">
      </form>

THANKS IN ADVANCE

[Spudhead]

I think you'll need to look at the errorPlacement option for the validate plugin. Using that, I can get the error messages to slide into view - not sure if that's the effect you're aiming for, you might want to tweak it a bit:

$(document).ready(function() {

	$("#contact").validate({
		messages: {
			name: 'Please enter your full name',
			email: 'Please enter a valid email address',
			message: 'Please enter your message'
		},
		errorPlacement: function(error, element) {
			error.hide().insertAfter(element).slideDown();
		}
	});
});

This won't affect the hiding of error messages once you put valid input in, though. I'm not sure there is a built-in way to do that, but tweaking the actual plugin to include that effect shouldn't be too hard.