尝试让这个联系表单正常工作,表单从隐藏的div中滑出来,看起来工作正常,但在提交表单时关闭,这就是我想要但即使表单字段为空它也会关闭。如果字段已提交并在收到确认之前将其提交关闭。
<section id="" class="contact contact-wrap">
<section class="wrap social-info intro contact about">
<section role="contact-form" id="contact-form">
<?php
if (isset($_POST['submit'])) {
$error = "";
if (!empty($_POST['name'])) {
$name = $_POST['name'];
} else {
$error .= "You didn't type in your name. <br />";
}
if (!empty($_POST['email'])) {
$email = $_POST['email'];
if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){
$error .= "The e-mail address you entered is not valid. <br/>";
}
} else {
$error .= "You didn't type in an e-mail address. <br />";
}
if (!empty($_POST['message'])) {
$message = $_POST['message'];
} else {
$error .= "You didn't type in a message. <br />";
}
if(($_POST['code']) == $_SESSION['code']) {
$code = $_POST['code'];
} else {
$error .= "The captcha code you entered does not match. Please try again. <br />";
}
if (empty($error)) {
$from = 'From: ' . $name . ' <' . $email . '>';
$to = "myemail@email";
$subject = "New contact form message";
$content = $name . " has sent you a message: \n" . $message;
$success = "<p>Thank you! Your message has been sent!</p>";
mail($to,$subject,$content,$from);
}
}
?>
<h2>Getin Touch</h2>
<div id="note"><?php
if (!empty($error)) {
echo '<p class="error"><strong>Your message was NOT sent<br/> The following error(s) returned:</strong><br/>' . $error . '</p>';
} elseif (!empty($success)) {
echo $success;
}
?></div><!--end note-->
<form method="post" id="contact">
<div class="input-wrap">
<div class="input">
<input type="text" placeholder="name" name="name" value="<?php if ($_POST['name']) { echo $_POST['name']; } ?>" class="required" id="name" />
</div>
<div class="input">
<input type="text" placeholder="email" name="email" id="email" value="<?php if ($_POST['email']) { echo $_POST['email']; } ?>" class="required email" id="email" />
</div>
<div class="input">
<input type="text" placeholder="subject" name="subject" id="subject" value="<?php if ($_POST['subject']) { echo $_POST['subject']; } ?>" class="required" id="subject" />
</div>
<div class="input">
<textarea rows="8" placeholder="message" name="message" id="message" style="height: 50px;"><?php if ($_POST['message']) { echo $_POST['message']; } ?></textarea>
</div>
<img src="<?php bloginfo('template_url'); ?>/includes/js/captcha.php"> <input type="text" placeholder="code" name="code"></p>
</div>
<input type="submit" value="Send Message" name="submit" id="submitButton" title="Click here to submit your message!" />
</form>
</section>
<div class="clear"></div>
</section>
</section>
$(document).ready(function(){
//animation for same page links #
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($(this.hash).length) {
$(this).click(function(event) {
var targetOffset = $(this.hash).offset().top;
var target = this.hash;
event.preventDefault();
$('html, body').animate({scrollTop: targetOffset}, 500);
return false;
});
}
}
});
$('#nav li a.contact, #content a#contact-link').click(function() {
$(this).toggleClass('selected');
$('.contact-wrap').slideToggle();
if(contentStatus == 'visible') {
$('#content, section.featured').fadeTo('normal', 0.2);
contentStatus = 'hidden';
} else {
$('#content, section.featured').fadeTo('normal', 1);
contentStatus = 'visible';
}
return false;
});
$('#content, footer').click(function() {
$('#nav li a.contact').removeClass('selected');
$('.contact-form').slideUp();
$('#content, section.featured').fadeTo('normal', 1);
contentStatus = 'visible';
});
});
答案 0 :(得分:1)
坦率地说,你的代码让我想要卷入一个胎儿位置然后去睡觉。我的意思是,亲爱的上帝将你的html,php和javascript分成不同的文件......
现在这种不愉快已经不在了......
将此媒体资源放入html requred="true"
在适当的时候将此逻辑添加到JS中。
if(!$("form").isValid()){
return false;
} else {
// do animation
}
答案 1 :(得分:0)
前端验证将是最好的,类似于(如果您不想像elclanrs建议的那样使用全功能验证器):
$('form').submit(function(e) {
if ($('textarea[name="name"]', this).val() == '') {
e.preventDefault();
errorMessage("You didn't type in your name. <br />");
}
// ... repeat for the rest of your fields
});
function errorMessage(error) {
$('#note').html('<p class="error"><strong>Your message was NOT sent<br/> The following error(s) returned:</strong><br/>' + error + '</p>');
}
或者如果有错误,您可以编辑您的php以在页面加载时默认显示表单。
if (!empty($error)) {
// show contact form
}