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"。この 2 つのことは決して和解することはありません。ユーザーがこのフィールドにデータを入力することを許可されていない場合、requiredルールに合格することはありません。逆に、ユーザーにここにデータを入力させたくない場合は、このフィールドのルールは必要ありません。

3) という名前のフィールドのルールを宣言しましたrefundが、HTML マークアップにそのようなフィールドが表示されません。

4) と を定義errorClass: 'error'しましvalidClass: 'valid'た。これらは組み込みのデフォルト値であるため、宣言する必要はまったくありません。

5)およびコールバック関数で使用していますがhighlight、HTML マークアップのどこにも要素がありません。内では、これにより検証メッセージが抑制されています。unhighlighterrorPlacement.closest('div')diverrorPlacement

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 に答える