Question

我正在尝试在我的应用程序的页面上使用jQuery验证，但我写的validate（）函数没有被调用，表单总是被提交。谁能看到我做错了什么？

以下是我的信息来源：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
    <body data-root="/" style="overflow-y:auto">
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                    <script type="text/javascript">
                        $(function () {
                            $("#formCreateInvoice").validate({
                                rules: {
                                    FirstName: {
                                        required: true,
                                        maxLength: 255
                                    },
                                    Surname: {
                                        required: true,
                                        maxLength: 255
                                    }
                                },
                                messages: {
                                    FirstName: {
                                        required: "Please enter a first name",
                                        maxLength: "The entered value is too long (must be no more than 255 characters)"
                                    },
                                    Surname: {
                                        required: "Please enter a surname",
                                        maxLength: "The entered value is too long (must be no more                 than 255 characters)"
                                    },
                                }
                            });
                        });
                    </script>

                    <form action="/Order/CreateSelfPay" id="formCreateInvoice" method="post">    <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row filters">
                                    <div class="form-group col-sm-4">
                                        <label for="SearchFirstName">First name</label>
                                        <input type="text" class="form-control " id="SearchFirstName">
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="SearchSurname">Surname</label>
                                        <input type="text" class="form-control" id="SearchSurname">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                        Clear <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <button class="btn btn-primary" type="submit">
                                        Create invoice <span class="glyphicon glyphicon-chevron-                right"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

    </body>
</html>

非常感谢任何帮助。

中号

Answer 1

验证框架使用name来标识字段，因此您需要为元素指定name属性。

<input type="text" class="form-control " id="SearchFirstName" name="FirstName">
<input type="text" class="form-control" id="SearchSurname" name="SurName">

jQuery验证 - 未调用validate（）

1 个答案: