【问题标题】:JQuery and AJAX form validation not workingJQuery 和 AJAX 表单验证不起作用
【发布时间】:2021-11-10 09:20:31
【问题描述】:

我对 Javascript 和 PHP 还很陌生,但需要对用户注册进行表单验证,我在将新用户插入数据库时​​遇到了麻烦。 我通过 JQuery 的验证插件在客户端验证表单,并尝试向数据库发送请求,并通过 AJAX 检查用户可用性。验证插件可以工作,但是当我通过 AJAX 请求数据库条目时出现问题,因为如果我按表单中的“发送”按钮,我会在屏幕上看到 Error occurred 警报。

我的registration.html代码:

<form id="form" name="registration" action="" method="POST">
    <label for="user_name">Nickname:</label><br>
    <input type="input" size="40" maxlength="10" name="user_name" id="user_name" placeholder="Nickname"><br><br>
    
    <label for="user_email">Email:</label><br>
    <input type="email" size="40" maxlength="20" name="user_email" id="user_email" placeholder="Email address"><br><br>
    <label for="user_password">Password:</label><br>
    <input type="password" size="40" maxlength="50" name="user_password" id="user_password" placeholder="Passwort"><br>

    <label for="confirmed_password">Confirm password:</label><br>
    <input type="password" size="40" maxlength="50" name="confirmed_password" id="confirmed_password" placeholder="Passwort bestätigen"><br><br>

    <input type="submit" name="register" value="Send">
</form>
<script src="./form_validation.js"></script>

我的 form_validation.js 代码:

    $("#form[name='registration']").validate({
        rules: {
            user_name: {
                required: true
            },
            user_email: {
                required: true,
                email: true
            },
            user_password: {
                required: true,
                minlength: 7
            },
            confirmed_password: {
                required: true,
                equalTo: "#user_password"
            }
        },
        messages: {
            user_name: 'Enter a nickname.',
            user_email: {
                required: 'Enter your email address.',
                email: 'Enter a valid email address.',
            },
            user_password: {
                required: 'Enter a password.',
                minLength: 'At least 7 characters.',
            },
            confirmed_password: {
                required: 'Confirm password.',
                equalTo: 'Passwords have to match.',
            }
        },
        submitHandler: function (form) { 
            $.ajax({
                url:'./user.php',
                type: "post",
                data: $(form).serialize(),
                success: function() {
                    alert("success");
                    console.log();
                    $("#result").html('Submitted');
                },
                error: function() {
                    alert("Error occured");
                    console.log();
                    $("#result").html('An error occured while submitting.');
                }       
            });
        }
    });
});

我的 user.php 代码:

<?php

require_once __DIR__ . "./connection.php";

if (isset($_POST["register"]) && isset($_POST['user_name']) && isset($_POST['user_email']) && isset($_POST['user_password']) && isset($_POST['confirmed_password'])) 
{
    $user_name = $_POST['user_name'];
    $user_email = $_POST['user_email'];
    $user_password = $_POST['user_pasword'];

    $db = new DB_connection;

    $sql = "SELECT * FROM user WHERE user_name = :user_name OR user_email = :user_email";

    $statement = $db->conn->prepare($sql);
    $statement->bindParam("user_name", $user_name);
    $statement->bindParam("user_email", $user_email);
    
    if ($statement->execute())
    {
        $sql =  "INSERT INTO user (user_name, user_pass, user_email) VALUES (:user_name, :user_password, :user_email)"; 

        $stmt = $db->conn->prepare($sql);
        $stmt->bindParam(":user_name", $user_name);
        $stmt->bindParam(":user_password", $user_password);
        $stmt->bindParam(":user_email", $user_email);

        if ($stmt->execute()) {
            echo "New user inserted";
        } else {
            echo "Something went wrong!";
        }
    } else {
        echo "Error!";
    }
}

【问题讨论】:

  • 如果你得到错误,这意味着 ajax url 错误或服务器端有问题,ajax 请求到达服务器端?
  • 您可以使用浏览器的开发工具检查http请求。还有一些参数可用于您的 ajax 错误函数,它们至少应该给您一些关于正在发生的事情的提示。 error: function(request, textStatus, errorText) {...}api.jquery.com/Jquery.ajax
  • 好的,有问题,因为没有发送参数。感谢您的链接。 @lupz
  • 虽然客户端验证非常有用,但您应该始终验证服务器端的所有输入!见owasp.org/www-project-proactive-controls/v3/en/…
  • 我知道我只想让我的 AJAX 请求首先在客户端工作。

标签: javascript html jquery ajax


【解决方案1】:

找到了解决办法。我只需要用include_once __DIR__ '/../config/config.php'; 替换include_once __DIR__ './connection.php';。奇怪的是没有出现MYSQL错误信息,其他类没有include_once语句也能正常工作。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-22
    • 2013-11-03
    • 1970-01-01
    • 1970-01-01
    • 2021-12-01
    相关资源
    最近更新 更多