0

我有一个 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>
4

1 回答 1

0

您有以下一般问题。其中一些正在引起问题。

1）在您的 OP 中，您缺少结束</form>标签。

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

3) 您已经为一个名为的字段声明了一个规则，refund但您的 HTML 标记中没有显示这样的字段。

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

5) 在您的highlight,unhighlight和errorPlacement回调函数中，您正在使用.closest('div')但div您的 HTML 标记中没有任何元素。在 内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>

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

于 2013-09-03T16:56:56.270 回答