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>

我正在使用从MS获取的jQuery的Validate插件验证它：http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

表单验证正常，但我需要淡出整个联系表单，并在所有字段有效并按下提交按钮后淡入“谢谢”容器。

我该怎么做？我想我会遗漏一些东西或者只是明白不知道它：p

这里是jsfiddle中的DEMO ...虽然我不知道为什么表单在那里没有正确验证，但它确实可以在我的服务器上运行。

我是jQuery的新手，所以到目前为止我所做的一切都是通过阅读并将我的头撞到墙上，所以我提前为任何错误道歉。

非常感谢任何帮助。

Answer 1

简单的事情：

$。watermark.show测试中不存在，测试失败的原因
请注意，“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()并执行类似使用jquery ajax表单插件的操作。

如果您想通过表单提交和页面重新加载提交，您可以在显示thankyou之后设置1毫秒的超时，这会将submitOk标志设置为true并再次提交表单。这使您可以渲染有趣的东西，让它实际渲染，然后只需提交表单并刷新页面。

Answer 2

<强>更新

DEMO已更新并进行了代码优化，现在效果更好。

-

德米特里，谢谢你的帮助。

我按照你的建议使用了jquery.forms插件，但我使用的代码有点不同。

解决方案

正如我所说，我使用jquery.forms插件通过Ajax提交表单。在提交表单时，带有“加载器”或“微调器”的DIV会淡入（尽管微调器图像未包含在演示中），然后它会淡出，然后谢谢你的消息会消失。

加载器的原因是用户在提交表单时看到“移动”的东西，这样用户在处理表单时不必看屏幕什么都不做。良好的可用性触摸。

在演示中，加载程序在按钮下方显示得非常快，因此如果您想要查看它，请注意该位置。

虽然给你投票。

再次感谢。

验证联系表单后显示感谢信息

2 个答案: