单击提交时验证不起作用：jquery

Question

我知道 JQuery，我正在尝试验证一个简单的表单。

这里的问题是验证在点击提交时不起作用。相反，我收到错误消息：

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5
            },
            "email": {
                required: false,
                email: true
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "email": {
                required: "Please, enter an email",
                email: "Email is invalid"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" />
    <button type="submit">Submit</button>
</form>

这里是 jsfiddle：https://jsfiddle.net/aimanpanday87/hsdscmcj/

Answer 1

在代码中显示下面的代码编辑只添加js链接

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5
            },
            "email": {
                required: false,
                email: true
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "email": {
                required: "Please, enter an email",
                email: "Email is invalid"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" />
    <button type="submit">Submit</button>
</form>

Answer 2

请使您的代码如下所示或检查以下小提琴链接：

工作代码链接：https://jsfiddle.net/hsdscmcj/9/

            <form id="form" method="post" action="#">
               Name
                <input type="text" name="name" id="name" />
                Email
                <input type="email" name="email" id="email" />
                <button type="submit">Submit</button>
            </form>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
            <script>

            $(document).ready(function () {
                $("#form").validate({
                    rules: {
                        "name": {
                            required: true,
                            minlength: 5
                        },
                        "email": {
                            required: true,
                            email: true
                        }
                    },
                    messages: {
                        "name": {
                            required: "Please, enter a name"
                        },
                        "email": {
                            required: "Please, enter an email",
                            email: "Email is invalid"
                        }
                    },
                    submitHandler: function (form) { // for demo
                        alert('valid form submitted'); // for demo

                    }
                });

            });

            </script>

这工作正常，请检查。

谢谢