jQuery表单验证不起作用

时间:2013-01-28 13:49:59

标签: jquery jquery-validate

我花了好几个小时,我不知道为什么这个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”事件中,现在它在文档加载时触发,在控制台输出消息“没有选中,无法验证,什么都不返回“ 这不是我希望它显然工作的方式,所以如何将它附加到click事件?

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

2 个答案:

答案 0 :(得分:6)

.validate()实际上没有执行验证,它配置表单进行验证。

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

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

请参阅此小提琴,了解一个工作示例:http://jsfiddle.net/v5HQr/1/

答案 1 :(得分:5)

您是否故意将提交按钮放在表单之外?我修改了它,在点击时提交表单。 它现在有效 - 出现验证消息,以及警报消息(当您提交包含某些内容的表单时)。请使用下面的代码部分,或在线试用 - 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>