0

试图让这个联系表单正常工作，表单从隐藏的 div 中滑出，这似乎工作正常，但在提交表单时关闭，这是我想要的，但即使表单字段为空，它也会关闭。如果字段已归档并提交，则在获得确认之前关闭。

演示在这里http://g-thos.com

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

});

});
4

2 回答 2

1

坦率地说，你的代码让我想蜷缩成胎儿的姿势睡觉。我的意思是，亲爱的上帝将你的 html、php 和 javascript 分成不同的文件......

现在这种不愉快的事情已经过去了……

  1. 使用这个验证插件。

  2. 将此属性放在 html 的必填字段中requred="true"

  3. 在适当的位置将此逻辑添加到您的 JS 中。

if(!$("form").isValid()){
  return false;
} else {
  // do animation
}
于 2012-10-29T22:26:58.810 回答
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
}
于 2012-10-29T22:26:31.590 回答