CODEWITHSUNDEEP
jqueryjquery-validate
Ricardo Zea
Ricardo Zea

Reputation: 10283

Show a Thank You message after validating contact form

I have a simple contact form:

<div class="contact-wrapper">        
      <div class="grid_8 contact-form-wrapper">
        <form id="contactus" method="GET" action="">             
          <p><em>All fields are required unless otherwise noted.</em></p>
          <fieldset>
            <legend>Tell us about yourself</legend>
            <ol>
              <li>
                <label for="firstname" accesskey="f">First Name:</label>
                <input type="text" id="firstname" name="firstname" tabindex="1" value="" title="First Name" class="required">
              </li>
              <li>
                <label for="lastname" accesskey="l">Last Name:</label>
                <input type="text" id="lastname" name="lastname" tabindex="2" value="" title="Last Name" class="required">
              </li>
              <li>
                <label for="email" accesskey="e">E-mail Address:</label>
                <input type="text" id="email" name="email" tabindex="3" value="" title="E-mail Address" class="required">
              </li>
              <li>
                <label for="phone" accesskey="p">Phone Number: <em>Optional</em></label>
                <input type="text" id="phone" name="phone" tabindex="4" value="" title="Phone Number">
              </li>
            </ol>
          </fieldset>
          <fieldset>
            <legend>How can we help you?</legend>
            <ol>
              <li>
                <label for="comments" accesskey="y">Your Message:</label>
                <textarea name="comments" rows="10" cols="20" id="comments" class="word_count required" tabindex="5" title="Your Message"></textarea>
                <span class="counter">&nbsp;</span></li>
            </ol>
          </fieldset>
          <div class="captcha">Captcha space...</div>
          <button type="submit" value="Send Message" class="btn">Send Message</button>
        </form>
      </div>
      <div class="ty">Thank you for your message.</div>         
    </div>

And I'm validating it with the jQuery's Validate plugin taken from MS: http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

The form validates fine, but I need to fade out the entire contact form and fade in the 'Thank You' container once all fields are valid and the submit button is pressed.

How do I do that? I would think I'm missing something or just plainly don't know it :p

Here's a DEMO in jsfiddle... although I don't know why the form doesn't validate correctly there, but it does work in my server.

I'm new to jQuery so all I've done so far is by reading and bumping my head into walls, so I apologize for any mistakes in advance.

Any help would be greatly appreciated.

Upvotes: 1

Views: 7053

Answers (2)

Ricardo Zea
Ricardo Zea

Reputation: 10283

UPDATE

The DEMO has been updated and code optimized, it works much better now.

--

Dmitriy, thanks for your help.

I used the jquery.forms plugin as you suggested but the code I used is a little different.

The Solution

As I said, I used the jquery.forms plugin to submit the form via Ajax. On submitting the form a DIV with a 'loader' or 'spinner' fades in (although the spinner image is not included in the demo), then it fades out and then the Thank You message fades in.

The reason for the loader is so that the user sees something 'moving' while the form is being submitted, this way the user doesn't have to watch the screen doing nothing while the form is being processed. Nice usability touch.

In the demo, the loader appears very fast right below the button, so pay attention to that spot if you want to see it in action.

Gave you a vote though.

Thanks again.

Upvotes: 0

Dmitriy Likhten
Dmitriy Likhten

Reputation: 5216

Couple of simple things:

  1. $.watermark.showAll does not exist in the test, its why the test fails
  2. Note that "error" class is added to any element in error. I am sure this is controllable.

What you can do is add a form submit handler, which will go after the submit handler validate already added:

var submitOk = false;
$("#contactus").submit(function(e) {
  var form = $(this);
  if (!form.find(".error") && !submitOk) {
    e.preventDefault() // stop form submition
    $(".ty").show(); // or whatever fun action you want to do like pop out fancybox
    // option 1 (see below)
    form.ajaxSubmit(); // jquery.forms plugin
    // option 2 (see below)
    setTimeout(function() { submitOk = true; form.submit(); }, 1);
  }
})

Here's the tricky question you must ask yourself: Do you want to submit to a new page, or you want to submit via ajax? If it is via ajax then e.preventDefault() and do something like using the jquery ajax form plugin.

If you want to submit via form submittion and page reload, you can set a timeout of 1 millisecond after displaying the thankyou which will set the submitOk flag to true and submit the form again. This lets you render the fun stuff, let it actually render, and then just submit the form and refresh the page.

Upvotes: 1

Related Questions