Question

当我直接提交时，会在表单操作中转到目标页面。没有验证。

我的表单

<form id="RegisterForm" method="post" action="register.php">
..
..
<input type="submit" value="Register Now" class="button">
</form>

我的Ajax代码validation.js

$(document).ready(function () {
    $('#RegisterForm').validate({
        rules: {
            name: "required",
            surname: "required",
            address: "required",
            nic: "required",
            email: {
                required: true,
                email: true
                },
                phone: "required",
                gfname: "required",
                gsurname: "required",
                gaddress: "required",
                gphone: "required"
                },
              messages: {
              name: "Please enter your name",
              surname: "Please enter Your Surname",
              address: "Please enter Address",
              nic: "Please enter ID card Number",
              email: "Please enter a valid email address"
        },
            // if success
        submitHandler: function (form) {
            $.post("register.php",$(form).serialize());
           $('#RegisterForm').fadeOut("slow");

        }   
    });

            return false;
});

导入的文件

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

我是bootstrap和ajax的新手。所以在你的答案中请提及我应该导入哪些文件来触发ajax验证。

Answer 1

您可以尝试像这样组织脚本标记：

    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

但是，如果这不起作用，您可以确保所有ID都与规则部分中的ID匹配。你还检查了你的控制台是否有任何错误，以确保javascript不会抛出任何东西吗？

Answer 2

您需要尽可能简化示例以找到问题。

以下示例正常工作：

<html>
<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    <script type="application/javascript">
        $(function () {
            $('#RegisterForm').validate({
                rules: {
                    name: "required"
                },
                messages: {
                    name: "Please enter your name"
                },
                // if success
                submitHandler: function (form) {
                    $.post("index.php", $(form).serialize());
                    $('#RegisterForm').fadeOut("slow");

                }
            });
        });
    </script>

</head>
<body>
<form id="RegisterForm" method="post" action="">
    <input type="text" name="name">
    <input type="submit" value="Register Now" class="button" name="zzz">
</form>
</body>
</html>

Ajax验证不起作用

2 个答案: