jQuery.validate плагин и представление формы ajax - PullRequest
Новая
       4

jQuery.validate плагин и представление формы ajax

5 голосов
/ 16 ноября 2010

Я не могу на всю жизнь заставить это работать. Ошибки проверки отображаются нормально, я не получаю синтаксических ошибок, но ничего не происходит. Форма просто отправляется на страницу. Я не могу заставить работать сообщения об ошибках или об ошибках ... 

<form id="contact" class="validation" method="post" action="">
<fieldset>
<ol class="comment_fields">
    <li>
        <label for="name">Name: <span>(required)</span></label>
        <input type="text" name="name" id="name" class="required" minlength="4" tabindex="1" />
    </li>
    <li>
        <label for="email">E&ndash;Mail: <span>(required / private)</span></label>
        <input type="text" name="email" id="email" class="required email" tabindex="2" />
    </li>
    <li>
        <label for="subject">Subject: <span>(required)</span></label>
        <input type="text" name="subject" id="subject" class="required" minlength="4" tabindex="3" />
    </li>
    <li class="comment_area">
        <label for="comment">Message: <span>(required)</span></label>
        <textarea name="message" id="message" rows="8" cols="8" class="required" minlength="10" tabindex="4"></textarea>
        <cite>Please, no XHTML.</cite>
    </li>
    <li class="submit">
        <input type="submit" class="button blue" value="Send Message" id="submit" tabindex="5" />
    </li>
</ol>
</fieldset>
</form>

<script type="text/javascript">

$("#contact").validate({
    rules: {
    name: {required: true},
    email: {required: true},
    subject: {requred: true},
    submitHandler: function() {
        $.ajax({
            type: "POST",
            url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
            data: formSerialize,
            timeout: 3000,
            success: function() {alert('works');},
            error: function() {alert('failed');}
        });

        return false;
    }
}
});

</script>

Это process.php: 

<?php
    if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
        $name = stripslashes(strip_tags($_POST['name']));
    } else {$name = 'No name entered';}

    if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
        $email = stripslashes(strip_tags($_POST['email']));
    } else {$email = 'No email entered';}

    if ((isset($_POST['message'])) && (strlen(trim($_POST['message'])) > 0)) {
        $message = stripslashes(strip_tags($_POST['message']));
    } else {$message = 'No message entered';}

    if ((isset($_POST['subject'])) && (strlen(trim($_POST['subject'])) > 0)) {
        $subject = stripslashes(strip_tags($_POST['subject']));
    } else {$message = 'No subject entered';}

    ob_start();
?>
<html>
    <head>
        <style type="text/css"></style>
    </head>
    <body>
        <table width="550" border="1" cellspacing="2" cellpadding="2">
            <tr bgcolor="#eeffee">
                <td>Name</td>
                <td><?=$name;?></td>
            </tr>
            <tr bgcolor="#eeeeff">
                <td>Email</td>
                <td><?=$email;?></td>
            </tr>
            <tr bgcolor="#eeffee">
                <td>Message</td>
                <td><?=$message;?></td>
            </tr>
        </table>
    </body>
</html>

<?
    $body = ob_get_contents();

    $to = 'someone@example.com';
    $email = 'email@example.com';
    $fromaddress = "you@example.com";
    $fromname = "Online Contact";

    require("phpmailer.php");

    $mail = new PHPMailer();

    $mail->From     = "you@you.com";
    $mail->FromName = "Contact Form";
    $mail->AddAddress("another_address@example.com","Name 1");

    $mail->WordWrap = 50;
    $mail->IsHTML(true);

    $mail->Subject  =  $subject;
    $mail->Body     =  $body;
    $mail->AltBody  =  "This is the text-only body";

    if(!$mail->Send()) {
        $recipient = 'your_email@example.com';
        $subject = 'Contact form failed';
        $content = $body;    
        mail($recipient, $subject, $content, "From: mail@yourdomain.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail");
        exit;
    }
?>

Ответы [ 3 ]

14 голосов
/ 17 ноября 2010

У вас есть submitHandler в пределах rules, оно должно быть рядом с , вот так: 

$(function() {
  $("#contact").validate({
      rules: {
          name: {required: true},
          email: {required: true},
          subject: {requred: true}
      },
      submitHandler: function(form) {
          $.ajax({
            type: "POST",
            url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
            data: $(form).serialize(),
            timeout: 3000,
            success: function() {alert('works');},
            error: function() {alert('failed');}
          });
          return false;
      }
  });
});

Также обратите внимание на добавление document.ready обработчик, чтобы быть в безопасности.

2 голосов
/ 13 июля 2013

Просто, чтобы помочь обновить этот пост.

Инкапсулировать с помощью: 

$(document).ready(function() { ALL YOUR CODE GOES HERE }

Удалить submitHandler из правил: 

rules: {
          name: {required: true},
          email: {required: true},
          subject: {requred: true}
      },
submitHandler: function(form) {.....

Добавить кеш:false, чтобы не допустить возврата формой браузера кешированного содержимого: 

request = $.ajax({
    type: "POST",
    cache: false,
    url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
    data: $(form).serialize(),
    timeout: 3000
});

Используйте done () и fail () вместо success и error сейчас: 

// Called on success.
request.done(function(msg) {
    alert('works');
});
// Called on failure.
request.fail(function (jqXHR, textStatus, errorThrown){
    alert('failed');
    // log the error to the console
    console.error(
        "The following error occurred: " + textStatus, errorThrown
    );
});

Вот и все:

$(document).ready(function() {
    $("#contact").validate({
        rules: {
            name: {required: true},
            email: {required: true},
            subject: {requred: true}
        },
        submitHandler: function(form) {
            request = $.ajax({
                type: "POST",
                cache: false,
                url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
                data: $(form).serialize(),
                timeout: 3000
            });
            // Called on success.
            request.done(function(msg) {
                alert('works');
            });
            // Called on failure.
            request.fail(function (jqXHR, textStatus, errorThrown){
                alert('failed');
                // log the error to the console
                console.error(
                    "The following error occurred: " + textStatus, errorThrown
                );
            });
            return false;
        }
    });
});

Добавьте no-cache в заголовок process.php, чтобы предотвратить кэширование содержимого в браузере: 

<?=header("cache-control: no-cache");?>
0 голосов
/ 17 ноября 2010

Уберите вашего submitHandler из ваших правил: -) 

$("#contact").validate({
                        rules: {
                        name: {required: true},
                        email: {required: true},
                        subject: {requred: true}
                        },
                        submitHandler: function() {
                            $.ajax({
                                type: "POST",
                                url: "<?php bloginfo("template_directory"); ?>/contact/process.php",
                                data: formSerialize,
                                timeout: 3000,
                                success: function() {alert('works');},
                                error: function() {alert('failed');}
                            });

                            return false;
                        }
                    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...