Javascript Jquery向上滑动功能未在联系人表单脚本中激活
除了最后一点使用向上滑动功能用感谢信息替换联系人表单外,此联系人表单上的所有内容都正常工作,我似乎无法找到解决方案 您填写表单,点击submit,发送电子邮件,并显示加载的gif,但slideup动画从未出现,感谢图像从未显示Javascript Jquery向上滑动功能未在联系人表单脚本中激活,javascript,jquery,forms,slideup,Javascript,Jquery,Forms,Slideup,除了最后一点使用向上滑动功能用感谢信息替换联系人表单外,此联系人表单上的所有内容都正常工作,我似乎无法找到解决方案 您填写表单,点击submit,发送电子邮件,并显示加载的gif,但slideup动画从未出现,感谢图像从未显示 <!--CONTACT PANEL--> <div id="contact-panel"> <div class="top">: : CONTACT ME : :</div> <form id="c
<!--CONTACT PANEL-->
<div id="contact-panel">
<div class="top">: : CONTACT ME : :</div>
<form id="contactform" method="post">
<ol class="forms">
<fieldset>
<label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="name" class="error"></label></p>
<fieldset>
<label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="email" class="error"></label></p>
<fieldset>
<label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
</fieldset>
<p style="margin-top: -5px;"><label for="message" class="error"></label></p>
<li class="buttons"><button type="submit" id="submitemail">Send Email »</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
</ol>
</form>
</div>
::联系我::
发送电子邮件»李>
这是JS
$(document).ready(function () {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
},
},
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email: "*Please enter a valid email address.",
message: "*Please, say something at least 10 characters long.",
},
submitHandler: function(form) {
$('#submitemail').hide();
$("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');
$.post('code/form-contact/submitcontactform.php',
$('form#contactform').serialize(),
function(data){
$("#contactform").slideUp("normal", function() {
$("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');
});
});
},
})
return false;
});
$(文档).ready(函数(){
$(“#联系人表单”)。验证({
规则:{
姓名:{
要求:正确,
最小长度:2
},
电邮:{
要求:正确,
电子邮件:真的
},
信息:{
要求:正确,
最小长度:10
},
},
信息:{
姓名:{
必填:“*请输入您的姓名。”,
minlength:“*您的姓名必须至少包含2个字符。”
},
电子邮件:“*请输入有效的电子邮件地址。”,
信息:“*请说至少10个字符长的话。”,
},
submitHandler:函数(表单){
$('#submitemail').hide();
$(“#contactform li.buttons”).append(“”);
$.post('code/form contact/submitcontactform.php',
$('form#contactform')。序列化(),
功能(数据){
$(“#contactform”).slideUp(“正常”,函数(){
$(“#联系方式”)。在('')之前;
});
});
},
})
返回false;
});
我尝试了很多不同的方法,但除了猜测和反复试验之外,我知道的还不够。欢迎任何帮助。我对json消息做了如下更改:
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email:
{
email: "*Please enter a valid email address.",
required: "Please enter email address."
},
message:
{
minlength: "*Please, say something at least 10 characters long.",
required: "Please enter message"
}
},
为了让它在fiddle中工作,我必须删除post调用,因为JSFIDLE不支持它:
您是否验证了包含slideUp调用的函数正在运行,比如使用console.log语句?请尝试在$.post之前执行slideUp,以查看post是否有问题。您是否使用了一些插件??对于firebug,我看到此错误
SyntaxError:函数语句需要一个名称
…有什么想法吗?非常感谢!你真是个天才……我刚刚在重新引入post调用后解决了几个语法问题……但现在一切都正常了!再次感谢!