使用 AJAX 进行 PHP 表单验证

Question

我正在尝试使用我的电子邮件表单，但出了点问题。 我在接收电子邮件时没有问题，但是使用 JSON 的 ajax 脚本过程（验证成功）无法正常工作，我不知道为什么。

我的 HTML：

 <form id="feedback" method="post" action="">

        <div class="enter-data"> 
          <label for="name"><span>Nome:</span></label>
          <input name="name" id="name" type="text" class="formbox">
         </div>

       <div class="enter-data">                 
          <label for="email"><span>E-mail:</span> </label>
          <input name="email" id="email" type="text" class="formbox">
         </div>

         <div class="enter-data">                
          <label for="telefone"><span>Telefone:</span></label>
          <input name="telefone" id="telefone" type="text" class="formbox">
         </div>

         <div class="enter-commnet">

           <label for="comments"></label>
           <textarea name="comments" id="comments"></textarea>

            </div>
             <div class="button_comment-bx">
    <button class="button_comment last"  name="send" id="send"  type="submit">Enviar</button>
               <button class="button_comment"  name="reset" id="reset" type="reset">Limpar</button>
            </div>
        </form>

我的 jquery **

（已编辑）

**：

$(document).ready(function(){
    $("#feedback").submit(function(){

        $(".error").remove();

        var check = true;
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

        var name = $("#name").val();
        var email = $("#email").val();
        var telefone = $("#telefone").val();

        // Validate Name
        if (name == '') {
            check = false;
            $('#name').after('<div class="error">* Preencha o seu nome!</div>');
        }
        else if (name.length < 3) {
            check = false;
            $('#name').after('<div class="error">* Nome demasiado curto!!</div>');
        }

        // Validate E-mail
        if (email == '') {
            check = false;
            $('#email').after('<div class="error">* Preencha o seu email!</div>');
        }
        else if (email.length < 5) {
            check = false;
            $('#email').after('<div class="error">* Email demasiado curto!</div>');
        }
        else if(!emailPattern.test(email)){
            check = false;
            $('#email').after('<div class="error">* E-mail não é válido!</div>');
        }

        // Validate Telefone
        if (telefone == '') {
            check = false;
            $('#telefone').after('<div class="error">* Preencha o seu telefone!</div>');
        }
        else if (telefone.length < 5) {
            check = false;
            $('#telefone').after('<div class="error">* Telefone não é válido!</div>');
        }


        // If validation is successful
$.ajax({
    type: "POST",
    url: "contact3.php",
    data: $("#feedback").serialize(),
    dataType: "json",
    success: function(response){
        $("#comments").after('<div class="success">Email enviado com sucesso!</div>');
        $('#name').val('');
        $('#email').val('');
        $('#telefone').val('');
        $('#comments').val('');
    } 
});  

    });
});

我用于发送邮件的 PHP 脚本 **

（已编辑）

**

<?php


$to ='myemail@email.com';
// Contact subject
$subject ="Contacto Site"; 

$header="from: $name <$email>";

$nome = $_POST['name'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];
$mensagem = $_POST['comments'];


// Corpo da mensagem
$body = "Nome: ".$nome;
$body.= "\n";
$body.= "Email: ".$email;
$body.= "\n";
$body.= "Telefone: ".$telefone;
$body.= "\n";
    $body.= "\n";
    $body.= nl2br($mensagem);



    // Enter your email address

    mail($to,$subject,$body,$header);

echo json_encode(array('mailSuccess' => 1));

请帮帮我！

Answer 1

您缺少脚本的返回值。您必须回显 json_encoded 字符串，jquery 将签入 if (!response.mailSuccess)

<?php
$to ='myemail@email.com'; // Contact subject $subject ="Contacto Site"; 

$header="from: $name <$email>";

$nome = $_POST['name']; $email = $_POST['email']; $telefone = $_POST['telefone']; $mensagem = $_POST['comments'];


// Corpo da mensagem $body = "Nome: ".$nome; $body.= "\n"; $body.= "Email: ".$email; $body.= "\n"; $body.= "Telefone: ".$telefone; $body.= "\n"; $body.= "\n"; $body.= nl2br($mensagem);



// Enter your email address

mail($to,$subject,$body,$header);

echo json_encode(array('mailSuccess' => 1));
?>

已编辑：

$.ajax({
    type: "POST",
    url: "contact3.php",
    data: $("#feedback").serialize(),
    dataType: "json",
    success: function(response){
        $("#comments").after('<div class="success">Email enviado com sucesso!</div>');
        $('#name').val('');
        $('#email').val('');
        $('#telefone').val('');
        $('#comments').val('');
    } 
});