JQuery 表单保持静态 - 页面不会即时验证

Question

我在使用 jquery 的联系表单时遇到了一些问题。

我之前多次使用过相同的代码，但这次我更改了 div 和类 要有有意义的名字。

一切正常，只是当您按下提交时，您会被实际带到 send.php，而不是将数据放在占位符 div 中。

这让我发疯了，所以我想知道另外几双眼睛是否能发现什么？

谢谢，

马丁

所有JS包含在页面头部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.highlight').hover(function(){
        $(this).children().addClass('datahighlight');
    },function(){
        $(this).children().removeClass('datahighlight');
    });
  });
  </script>

<script type="text/javascript">
window.addEvent('domready', function(){
$('contactform').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('form_results').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
                       }
                    });
                });
            });
</script>      

联系方式：

        <h2 class="contact">Contact Us</h2>

        <p> Some text</p>

        <div id="log">
            <div id="form_results">
                <!-- SPANNER -->
            </div>
        </div>

        <form method="post" id="contactform" action="send.php"> 

            <p><label for="name">Name</label></p> 
            <input type="text" id=name name=name placeholder="First and last name" tabindex="1" /> 

            <p><label for="email">Email</label></p> 
            <input type="text" id=email name=email placeholder="example@domain.com" tabindex="2" /> 

            <p><label for="comment">Your Message</label></p> 
            <textarea name="comment" id=comment name=comment placeholder="Comments" tabindex="4"></textarea> 

            <input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" /> 

        </form> 


    </section>

发送.php：

<?php

function alpha_numeric($str)
{
    return ( ! preg_match("/^([-a-z0-9])+$/i", $str)) ? FALSE : TRUE;
}

function valid_email($str)
{
    return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}

if ($_POST['name']=='' || strlen($_POST['name'])<3)
{
    $errors[] = 'Please include your name, it helps when contacting you! [needs to be more than 3 characters]';
}

if (valid_email($_POST['email'])==FALSE)
{
    $errors[] = 'At least put a real e-mail address!';
}

if ($_POST['comment']=='' || strlen($_POST['comment'])<3)
{
    $errors[] = 'Please write something, otherwise it\'s pointless contacting us!';
}

if(is_array($errors))
{
    echo '<div id="error-margin">';
    echo '<p class="error"><b>Can\'t send it for the following reasons:</b></p><br />';
    while (list($key,$value) = each($errors))
    {
        echo '<span class="error">'.$value.'</span><br /><br />';
    }
    echo'</div>';
}
else {
    // do something here----store to db, send email
    echo'<div id="success">';
    echo '<p><b>It worked!</b></p>';
    echo '<span>Thanks for contacting us! We\'ll be in touch soon</span>';
    echo'</div>';

    $name = stripslashes($_POST['name']); //sender's name
    $email = stripslashes($_POST['email']); //sender's email


    // The subject
    $subject  = "Message from 4playtheband.co.uk "; //The default subject. Will appear by default in all messages.

    $msg  = "From :   $name \r\n";  // add sender's name to the message
    $msg .= "e-mail : $email \r\n\n";  // add sender's email to the message
    $msg .= "---Message--- \r\n\n\t".stripslashes($_POST['comment'])."\r\n\n";  // the message itself

    // Extras:
    // Display user information such as Ip address and browsers information...
    $msg .= "---User information--- \r\n\n"; //Title
    $msg .= "User IP Address: ".$_SERVER["REMOTE_ADDR"]."\r\n"; //Sender's IP
    $msg .= "Browser: ".$_SERVER["HTTP_USER_AGENT"]."\r\n"; //User agent
    $msg .= "Page User Came From: ".$_SERVER["HTTP_REFERER"]; //Referrer

    // Send!
    (mail('someone', $subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n"));

}

?>

Answer 1

• 演示和来源： https://so.lucafilosofi.com/jquery-form-remains-static-page-doesnt-validate-on-the-fly/

你使用的是jquery，所以不用window.addEvent('domready', function(){

你的 js 代码应该是这样的：

$('#contactform').submit(function() {
    var query = $(this).serialize();
    $('#form_results').fadeOut(500).addClass('ajax-loading');
    $.ajax({
        type: "POST",
        url: "send.php",
        data: query,
        success: function(data) {
            $('#form_results').removeClass('ajax-loading').html(data).fadeIn(500);
        }
    });
    return false;
});

Answer 2

window.addEvent('domready',... 来自 MooTool。由于您使用 Jquery，您可能需要添加

<script language="javascript" type="text/javascript">
  jQuery.noConflict();
</script>

之前。哦，FancyUpload 似乎只适用于 MooTool，别忘了包含它。

Answer 3

我通常像这样使用 preventDefault()

<script type="text/javascript">
  window.addEvent('domready', function(){
    $('contactform').addEvent('submit', function(e) {
      e.preventDefault();
      var log = $('form_results').empty().addClass('ajax-loading');
      this.send({
        update: log,
        onComplete: function() {
          log.removeClass('ajax-loading');
        }
      });
    });
  });
</script>