Показать сообщение с благодарностью после проверки контактной формы

Question

У меня есть простая контактная форма:

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

И я проверяю ее с помощью плагина Validate jQuery, взятого из MS: http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

Форма проверяется нормально, но янужно исчезнуть всю контактную форму и исчезнуть в контейнере «Спасибо», как только все поля заполнены и нажата кнопка отправки.

Как мне это сделать?Я думаю, что я что-то упускаю или просто не знаю этого: p

Вот DEMO в jsfiddle ... хотя я не знаюпочему форма там не проверяется правильно, но она работает на моем сервере.

Я новичок в jQuery, поэтому все, что я до сих пор делал, это читал и врезался головой в стены, поэтому язаранее извиняюсь за любые ошибки.

Любая помощь будет принята с благодарностью.

Answer 1

Пара простых вещей:

1. $. Watermark.showВсе тесты не существуют, поэтому тест не пройден
2. Обратите внимание, что класс error добавлен в любойэлемент в ошибке.Я уверен, что это управляемо.

Что вы можете сделать, это добавить обработчик отправки формы, который будет идти после того, как обработчик отправки уже подтвердил добавленную:

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);
  }
})

Вот хитростьвопрос, который вы должны задать себе: хотите ли вы перейти на новую страницу или вы хотите отправить через ajax?Если это через ajax, тогда e.preventDefault() и сделайте что-то вроде использования плагина формы jjery ajax.

Если вы хотите отправить через отправку формы и перезагрузку страницы, вы можете установить время ожидания в 1 миллисекунду после отображения спасибокоторый установит флаг submitOk в true и снова отправит форму.Это позволяет визуализировать забавные вещи, позволить им на самом деле визуализировать, а затем просто отправить форму и обновить страницу.

Answer 2

ОБНОВЛЕНИЕ

DEMO был обновлен и оптимизирован для кода, теперь он работает намного лучше.

--

Дмитрий, спасибо за вашу помощь.

Я использовал плагин jquery.forms, как вы предложили, но код, который я использовал, немного отличается.

TheРешение

Как я уже сказал, я использовал плагин jquery.forms для отправки формы через Ajax.При отправке формы DIV с «загрузчиком» или «вертушкой» появляется (хотя изображение вертушки не включено в демонстрационную версию), затем оно исчезает, а затем появляется сообщение «Спасибо».

причина загрузки заключается в том, что пользователь видит что-то «движущееся» во время отправки формы, таким образом, пользователю не нужно смотреть на экран, ничего не делая во время обработки формы.Приятное удобство в использовании.

В демонстрационной версии загрузчик появляется очень быстро прямо под кнопкой, поэтому обратите внимание на это место, если хотите увидеть его в действии.

Хотя и дал вам свой голос.

Еще раз спасибо.