jQuery 验证,验证不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14282322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:25:12  来源:igfitidea点击:

jQuery validate, validation not working

jqueryjquery-validate

提问by user1851487

I have got a simple signup form that uses jQuery validate to validate the contents of the form. but it doesnt seem to be working. My servlet fires and the form is submitted with invalid data regardless of the jQuery at the top of my page. Below is my code. Can anyone please help?

我有一个简单的注册表单,它使用 jQuery 验证来验证表单的内容。但它似乎没有工作。我的 servlet 触发并且表单提交的数据无效,而不管页面顶部的 jQuery 是什么。下面是我的代码。有人可以帮忙吗?

Script code:

脚本代码:

<head>
    <title>Sign Up</title>
    <meta charset="iso-8859-1">
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript">
    </script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        $().ready(function() {
            // validate the comment form when it is submitted
            $("#signup").validate();

            // validate signup form on keyup and submit
            $("#signup").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    address1: "required",
                    city: "required",
                    county: "required",
                    postcode: "required",

                    password_s: {
                        required: true,
                        minlength: 5
                    },
                    password_s_con: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password_s"
                    },
                    email: {
                        required: true,
                        email: true
                    },

                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    address1: "Please enter your addres",
                    city: "Please enter your city/town",
                    county: "Please enter your county",
                    postcode: "Please enter your postcode",

                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                }
            });

        });
    </script>
</head>

The Form:

表格:

<table align="left">
<tr><td align="left">
        <form name="signup" id="signup" action="SignUpServlet" method="post">
            <table width="400px" align="right" class="">
                <fieldset>
                    <legend>Sign Up:</legend>
                    <tr>
                        <td>First Name:</td> <td><input type="text" id="firstname" name="firstname" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Last Name:</td><td><input type="text" id="lastname" name="lastname" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Address Line 1:</td><td> <input type="text" id="address1" name="address1" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Address Line 2:</td><td> <input type="text" id="address2" name="address2"></td>
                    </tr>
                    <tr>
                        <td>City:</td><td> <input type="text" id="city" name="city" required="required">*</td>
                    </tr>
                    <tr>
                        <td>County:</td><td><input type="text" id="county" name="county" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Postcode:</td> <td><input type="text" id="postcode" name="postcode" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Phone:</td><td> <input type="text" id="phone" name="phone"></td>
                    </tr>
                    <tr>
                        <td>Email Address:</td><td> <input type="text" id="email_s" name="email_s" required="required">*</td>
                    </tr>
                    <tr>
                        <td>Password:</td><td> <input type="password" id="password_s" name="password_s" required="required"></td>
                    </tr>
                    <tr>
                        <td>Confirm Password:</td><td> <input type="password" id="password_s_con" name="password_s_con" required="required"></td>
                    </tr>
                    <tr>
                        <td>Privacy Policy:</td><td> <input type="checkbox" class="checkbox" id="agree" name="agree" required="required"></td>
                    </tr>
                    <tr>
                        <td></td><td>
                            <input type="submit" id="lf_submit" value="submit"></td>
                    </tr>
                </fieldset>
            </table>
        </form>
    </td></tr>
<tr><td align="left"> </td></tr>
</table>

回答by Sparky

Firstly, you do not need to call .validate()twice. It's redundant and superfluous, so remove the first one, and naturally keep the one that contains the options.

首先,您不需要调用.validate()两次。它是多余的和多余的,因此删除第一个,并自然保留包含选项的那个。

$().ready(function() {
        // validate the comment form when it is submitted
        $("#signup").validate(); // <-- REMOVE THIS

        // validate signup form on keyup and submit
        $("#signup").validate({

.validate()is called once within DOM Readyto initialize the form. All of the validation events such as submit, keyup, etc. are automatic unless you over-ride them in the plugin options.

.validate()在内部调用一次DOM Ready以初始化表单。所有验证事件如submitkeyup等都是自动在插件选项,除非你过骑他们。

Secondly, you are incorrectlyincluding jQuery afterthe plugin.

其次,您在插件之后错误地包含了 jQuery 。

No matter which jQuery plugins you use, jQuery ALWAYS needs to be included FIRST...

无论您使用哪个 jQuery 插件,都需要首先包含 jQuery...

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>

Working Demo of Your Code:http://jsfiddle.net/qUYvS/

您的代码的工作演示:http: //jsfiddle.net/qUYvS/

Documentation:http://jqueryvalidation.org/

文档:http : //jqueryvalidation.org/