在jQuery和PHP中使用AJAX验证表单-解网

问：


<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <!-- JQuery link -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <!-- JQuery code -->
        <script>
            $(document).ready(function() {
                $("form").submit(function(event) {
                    // Disable the action and the method inside the form 
                    event.preventDefault();
                    // Now get data from the inputs
                    var name = $("mail-name").val();
                    var email = $("mail-email").val();
                    var gender = $("mail-gender").val();
                    var message = $("mail-message").val();
                    var submit = $("mail-submit").val();
    
                    $(".form-message").load("mail.php", {
                        name: name, 
                        email: email,
                        gender: gender,
                        message: message,
                        submit: submit
                    });
                });
            });
        </script>
    </head>
    <body>
    
    <form action="mail.php" method="POST"> 
        <input id="mail-name" type="text" name="name" placeholder="Full name">
        <br>
        <input id="mail-email" type="text" name="email" placeholder="Email">
        <br>
        <select id="mail-gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <br>
        <textarea id="mail-message" name="message" placeholder="Message"></textarea>
        <br>
        <button id="mail-submit" type="submit" name="submit">Send e-mail</button>
        <p class="form-message"></p>
    </form>
    
    </body>
    </html>

<!-- this is the mail.php file that has the error handlers -->

<?php 
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $message = $_POST['message'];
    
    $errorEmpty = false;
    $errorEmail = false;

    if (empty($name) || empty($email) || empty($message)) {
        echo "<span class='form-error'>Fill in all fields!</span>";
        $errorEmpty = true;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "<span class='form-error'>Wtite a valid e-mail address!</span>";
        $errorEmail = true;
    }
    else {
        echo "<span class='form-success'>Everything is right!</span>";
    }
}
else {
    echo "There was an error!";
}
?>

<script>
    $("#mail-name, #mail-email, #mail-gender, #mail-message").removeClass("input-error");

    var errorEmpty = "<?php echo $errorEmpty; ?>";
    var errorEmail = "<?php echo $errorEmail; ?>";

    if (errorEmpty == true) {
        $("#mail-name, #mail-email, #mail-message").addClass("input-error");
    }
    if (errorEmail == true) {
        $("#mail-email").addClass("input-error");
    }
    // There are no errors
    if(errorEmpty == false && errorEmail == false){
        // remove the values inside the inputs
        $("#mail-name, #mail-email, #mail-message").val("");
    }
</script>

单击提交按钮时出现此错误!!

M137：4 未捕获的语法错误：无效或意外的令牌

在 p （jquery.min.js：2：523）在 Ja （jquery.min.js：3：15825）
在 r.fn.init.append （jquery.min.js：3：17096）
在 r.fn.init。（jquery.min.js：3：18200）
在 T （jquery.min.js：3：398）
在 r.fn.init.html （jquery.min.js：3：17878）
在对象。（jquery.min.js：4：19097）
在 I （jquery.min.js：2：28017）
在 Object.fireWith [as resolveWith] （jquery.min，.js：2：28783）
在 A （jquery.min.js：4：14017）

PHP jQuery ajax 表单验证

在jQuery和PHP中使用AJAX验证表单

Validating a form using AJAX in jQuery & PHP

评论

评论