Question

我有一个HTML表单。它工作正常，我想在表单上应用验证。我不能让jQuery Validate在这个表单上工作。

HTML表单：

<form method="POST" action="/hourtable/" class="form-horizontal" id= "hour_form"  name="hourform" enctype="multipart/form-data">
<input type="text" id="id_dateDue" class="input-xlarge" name="date" readonly="true" />
<input type="text"  class="input-xlarge" name="appid" value="{{gethours}}" />
<input type="text"  class="input-xlarge" name="hours" value="" />
<button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>

jQuery的：

<script>
            $(document).ready(function(){

                //* validation
                $('#hour_form').validate({
                    onkeyup: false,
                    errorClass: 'error',
                    validClass: 'valid',
                    rules: {
                        date: { required: true, minlength: 3 },
                        appid: { required: true, minlength: 3 },
                        hours: { required: true, minlength: 3 },
                        refund: { required: true, minlength: 3 }
                    },
                    highlight: function(element) {
                        $(element).closest('div').addClass("f_error");
                        setTimeout(function() {
                            boxHeight()
                        }, 200)
                    },
                    unhighlight: function(element) {
                        $(element).closest('div').removeClass("f_error");
                        setTimeout(function() {
                            boxHeight()
                        }, 200)
                    },
                    errorPlacement: function(error, element) {
                        $(element).closest('div').append(error);
                    }
                });


            });
        </script>

Answer 1

您有以下一般问题。其中一些导致了问题。

1）在您的OP中，您错过了结束</form>标记。

2）您的name="date"字段为required，但也包含readonly="true"。这两件事永远不会和解。如果不允许用户在此字段中输入数据，则永远不会传递required规则。相反，如果您不希望用户在此处输入数据，则您不需要此字段的规则。

3）您已为名为refund的字段声明了规则，但HTML标记中没有显示此字段。

4）您已定义errorClass: 'error'和validClass: 'valid'。这些是内置的默认值，因此声明它们是完全没必要的。

5）在您的highlight，unhighlight和errorPlacement回调函数中，您使用的是.closest('div')，但HTML标记中没有任何div个元素。在errorPlacement内，这会导致您的验证消息被抑制。

6）在你的highlight/unhighlight回调函数中，你引用了一个名为boxHeight()的东西，然而，你的OP中没有其他任何东西。你还没有解释你在这些回调函数中想要完成的任务。

7）您的value="{{gethours}}"字段中有appid，但没有说明其来源。

以上问题解决了以下问题。

$(document).ready(function () {

    //* validation
    $('#hour_form').validate({
        onkeyup: false,
        rules: {
            date: {
                required: true,
                minlength: 3
            },
            appid: {
                required: true,
                minlength: 3
            },
            hours: {
                required: true,
                minlength: 3
            }
        }
    });

});

<强> HTML ：

<form method="POST" action="/hourtable/" class="form-horizontal" id="hour_form" name="hourform" enctype="multipart/form-data">
    <input type="text" id="id_dateDue" class="input-xlarge" name="date" /><br/>
    <input type="text" class="input-xlarge" name="appid" /><br/>
    <input type="text" class="input-xlarge" name="hours" /><br/>
    <button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>
</form>

DEMO ：http://jsfiddle.net/GAb8Z/

带有jQuery Validation插件的HTML表单

1 个答案: