validation联系表单后显示感谢信息

我有一个简单的联系表格：

 
 
 
All fields are required unless otherwise noted.
 
 
Tell us about yourself
 
 
 First Name:  
 
 Last Name:  
 
 E-mail Address:  
 
 Phone Number: Optional  
 
 
 
 
How can we help you?
 
 
 Your Message:   
 
 
 
Captcha space...
 Send Message 
 
 
Thank you for your message.
  

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

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

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

这是jsfiddle中的一个DEMO …虽然我不知道为什么表单没有正确validation那里，但它确实在我的服务器中工作。

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

任何帮助将不胜感激。

Answer 1

几个简单的事情：

1. $ .watermark.showAll在测试中不存在，这是测试失败的原因
2. 请注意，“error”类被添加到错误的任何元素中。 我确信这是可控的。

你可以做的是添加一个表单提交处理程序，它将在已经添加的提交处理程序validation之后进行：

 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

UPDATE

DEMO已经过更新和代码优化，现在效果更好。

–

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

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

解决方案

正如我所说，我使用jquery.forms插件通过Ajax提交表单。 在提交表单时，带有’loader’或’spinner’的DIV会淡入（尽管spinner图像不包含在演示中），然后它淡出然后Thank You消息淡入。

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

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

虽然给你投票。

再次感谢。