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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery PHP Contact Form

    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:
    Code:
    <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:
    Code:
    <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

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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:

    Code:
    $(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.


  •  

    Posting Permissions

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