即使验证规则失败，表单也会提交

Question

感谢您查看问题。

在这里，我正在尝试验证注册表单并使用此插件http://jqueryvalidation.org/

            <form id = 'signupForm' name ='signupForm' method='post' action='/signupUser'>
                <table class='bttable'>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "fName" name = "fName" class ='ep' type = "textbox" placeholder="Given Name"></input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id='errorfName' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "mName" name = "mName" class ='ep' type = "textbox" placeholder="Middle Name"></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errormName' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "lName"  name = "lName" class ='ep' type = "textbox" placeholder="Family Name"></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errorlName' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "email"  name = "email" class ='ep' type = "email" placeholder="Email:"></input>
                        </td>
                    </tr>
                    <tr >
                    <td>
                            <div id='erroremail' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "cEmail" name = "cEmail" class ='ep' type = "email" placeholder="Retype Email:"></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errorcEmail' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "passwd" name = "passwd" class ='ep' type = "password" placeholder="Password:"></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errorpasswd' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "rPasswd" name = "rPasswd" class ='ep' type = "password" placeholder="Retype Password:"></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errorrPasswd' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <br>
                            <input id = "login" name = "login" class ='loginButton' type = "submit" value="Submit"></input>
                        </td>
                    </tr>
                </table>
            </form>             
        </div>
    </div>
    <script src="javascripts/jquery/jquery-1.9.1.js"></script>
    <script src="javascripts/jquery/jquery.validate.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#signupForm").validate({
                rules: {
                    fName: {
                        required: true,
                        accept: "[a-zA-Z]+"
                    },
                    mName: {
                        required: false,
                        accept: "[a-zA-Z]+"
                    },
                    lName: {
                        required: true,
                        accept: "[a-zA-Z]+"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    cEmail: {
                        required: true,
                        email: true,
                        equalTo: '#email'
                    },
                    passwd: {
                        required: true,
                        minlength: 8
                    },
                    rPasswd: {
                        required: true,
                        minlength: 8,
                        equalTo: '#passwd'
                    }
                },
                messages: {
                    fName: "Please enter valid name.",
                    mName: "Please enter valid name.",
                    lName: "Please enter valid name.",
                    email: "Please enter valid email.",
                    cEmail: {
                        email: "Please enter valid email.",
                        equalTo: "It doesn't match with email."
                    },
                    passwd: {
                        required: "Please enter your password",
                        minlength: "Minlength has to be 8"
                    },
                    rPasswd: {
                        required: "Please enter your password",
                        minlength: "Minlength has to be 8",
                        equalTo: "Doesn't match with password field."
                    }
                },

                errorPlacement: function ($error, $element) {
                    var name = $element.attr("name");
                    $("#error" + name).append($error);
                },

                submitHandler: function (form) {
                    alert('valid form submit');
                }
            });
        })
    </script>
</body>

但即使规则失败，它也会提交表单。

另一方面，下面的类似登录表单正在按预期工作

            <form id = 'loginForm' name ='loginForm' method='post' action = "/loginUser">
                <table class='bttable'>
                    <tr>
                        <td class='btheight btalign fb'><a href="/auth/facebook" class='socialLink'>Sign in with Facebook</a></td>
                    </tr>   
                    <tr >
                        <td class='btheight btalign tw'><a href="/auth/twitter">Login with Twitter</a></td>
                    </tr>
                    <tr>
                        <td class='btheight btalign go'><a href="/auth/google">Login with Google</a></td>
                    </tr>
                    <tr>
                        <td class='line'>–––––––––––– OR ––––––––––––</td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "email" name = "email" class ='ep' type='email' placeholder="Your Email" required></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='erroremail' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td class='btheight btalign tw'>
                            <input id = "passwd" name = "passwd" class ='ep' type = "password" placeholder="Your Password" required></input>
                        </td>
                    </tr>
                    <tr >
                        <td>
                            <div id='errorpasswd' class='errorclass'></div>
                        </td>
                    </tr>
                    <tr >
                        <td >
                            <br>
                            <input id = "login"  name='login' class ='loginButton' type = "submit" value="Submit"></input>
                        </td>
                    </tr>
                </table>
            </form> 
        </div>
    </div>
    <script src="javascripts/jquery/jquery-1.9.1.js"></script>
    <script src="javascripts/jquery/jquery.validate.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#loginForm").validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    passwd: {
                        required: true,
                        minlength: 8
                    }
                },
                messages: {
                    email: "Please enter a valid email address.",
                    passwd: {
                        required: "Please enter your password",
                        minlength: "Minlength has to be 8"
                    }
                },

                errorPlacement: function ($error, $element) {
                    var name = $element.attr("name");
                    $("#error" + name).append($error);
                },

                submitHandler: function (form) {
                    alert('valid form submit');
                }
            });
        })
    </script>

还有什么规则建议？

谢谢

Answer 1

您的 HTML 标记...

<input id = "fName" name = "fName" class ='ep' type = "textbox" placeholder="Given Name"></input>

1) 应该是type="text"，而不是textbox。 AFAIK，没有 type="textbox" 这样的东西。

2) input 元素是“自动关闭的”，而不是容器，并且没有关闭输入标记（</input>）之类的东西。

无效：<input></input>

有效：<input />

有效：<input>

提示：所有这些额外的空格都是不一致的、不必要的，而且通常不是您编写 HTML 标记的方式。与引号的类型保持一致也不错，单引号或双引号。

清理：

<input id="fName" name="fName" class="ep" type="text" placeholder="Given Name" />

---

在您的 rules 选项中...

fName: {                // <- this is a type="text" input
    required: true,
    accept: "[a-zA-Z]+" // <- accept is only for type="file" inputs
},
...

1) The accept method 仅用于为使用 <input type="file" /> 元素上传的文件设置 MIME 类型，而不是 text 输入的正则表达式。

2) 如果你想使用正则表达式，那么你需要pattern 方法并且你还必须包含the additional-methods.js file。

fName: {                
    required: true,
    pattern: "[a-zA-Z]+"
},
...

演示：http://jsfiddle.net/fE3DG/

---

编辑：

OP 从未询问过正则表达式，只是表示验证正在提交表单而没有显示任何错误，所以这就是这个问题的答案。基于下面的 cmets，假设 OP 只想匹配大小写字母，请将正则表达式模式更改为此...

pattern: "^[A-z]+$"

更新的演示：http://jsfiddle.net/fE3DG/1/

Answer 2

您需要插件中的附加方法.min.js