使用jQuery & PHP的AJAX表单验证报错：Uncaught SyntaxError

我使用jQuery与PHP实现AJAX表单验证功能，编写了如下前端HTML代码及后端mail.php验证逻辑，但点击提交按钮时控制台出现语法错误。

前端HTML代码 #

<!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>

后端mail.php代码 #

<!-- 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 Uncaught SyntaxError: Invalid or unexpected token

错误调用栈：

• at p (jquery.min.js:2:523) at Ja (jquery.min.js:3:15825)
• at r.fn.init.append (jquery.min.js:3:17096)
• at r.fn.init.<匿名> (jquery.min.js:3:18200)
• at T (jquery.min.js:3:398)
• at r.fn.init.html (jquery.min.js:3:17878)
• at Object.<匿名> (jquery.min.js:4:19097)
• at i (jquery.min.js:2:28017)
• at Object.fireWith [as resolveWith] (jquery.min.js:2:28783)
• at A (jquery.min.js:4:14017)

问题原因及修复方案 #

1. 前端jQuery选择器缺失ID前缀# #

获取表单元素值时，所有ID选择器都遗漏了#前缀（比如$("mail-name")），导致jQuery无法找到对应元素，获取到undefined值，传递给后端的数据异常，进而引发后续逻辑错误。

修复后的前端JS代码片段：

// 为所有ID选择器添加#前缀
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();

2. 后端输出的JS存在语法漏洞 #

• PHP变量$errorEmpty和$errorEmail在else分支中未定义，会触发PHP警告，警告信息会混入输出内容，导致JS语法错误。
• 将PHP布尔值用引号包裹输出到JS中，会导致类型不匹配（比如"true"是字符串，和布尔值true比较会有问题）。

修复后的后端代码：

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

<?php 
// 提前初始化变量，避免未定义警告
$errorEmpty = false;
$errorEmail = false;

if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $message = $_POST['message'];

    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)) {
        // 修正拼写错误：Wtite → Write
        echo "<span class='form-error'>Write 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 ? 'true' : 'false'; ?>;
    var errorEmail = <?php echo $errorEmail ? 'true' : 'false'; ?>;

    if (errorEmpty) {
        $("#mail-name, #mail-email, #mail-message").addClass("input-error");
    }
    if (errorEmail) {
        $("#mail-email").addClass("input-error");
    }
    // 优化条件判断写法
    if(!errorEmpty && !errorEmail){
        $("#mail-name, #mail-email, #mail-message").val("");
    }
</script>

3. 额外优化建议 #

• 将邮箱输入框的类型改为email，符合HTML语义化：<input id="mail-email" type="email" name="email" placeholder="Email">
• 后端输出的提示文本中，修正拼写错误Wtite为Write，提升用户体验。

内容的提问来源于stack exchange，提问作者Jad