7

我在这上面花了几个小时，我不知道为什么这个 jquery validate() 不起作用。我终于把它分解到最低限度，它仍然不起作用。这是实际的代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>

    <script>

        $(document).on("click", "#submit", function() {

            $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

            return false;
         });

    </script>

</head>
<body>

    <form id="form">
        <input type="text" value="" name="input" id="input" />
    </form>
    <a href="#" id="submit">submit</a>

</body>
</html>

我在这里遗漏了一些明显的东西吗？单击“提交”时，我没有收到任何错误，也没有任何反应。

更新：我已将“click”事件之外的 validate() 移动到文档“ready”事件中，现在它在文档加载时触发，在控制台中输出消息“未选择，无法验证，不返回任何内容”这是不是我希望它明显工作的方式，那么如何将它附加到点击事件？

更新 2：感谢@NXT，我终于运行了验证，但是“submitHandler”仍然无法正常工作，我需要使用它来进行 Ajax 调用，因为必须在不重新加载页面的情况下提交表单。

4

2 回答 2

7

您是否故意将提交按钮放在表单之外？我对其进行了修改，以在单击时提交表单。它现在可以工作了 - 出现验证消息，以及警告消息（当您提交带有一些内容的表单时）。使用下面的代码部分，或在线尝试 - http://jsfiddle.net/Vcmfs/

头：

<script>
    $(function(){
        $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

        $("#submit").click(function(){
            $("#form").submit();
            return false;
        });
    });
</script>

身体：

<form id="form">
    <input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>
于 2013-01-28T14:12:12.830 回答
6

.validate()实际上并不执行验证，它配置表单进行验证。

如果您将提交链接更改为提交按钮<input type='submit' value='Submit'/>，它将按预期工作。

另一种选择是调用.valid()链接点击处理程序，这将触发验证。

请参阅此小提琴以获取工作示例：http: //jsfiddle.net/v5HQr/1/

于 2013-01-28T14:05:04.297 回答