1

ここで何が問題なのか理解できないようです。js を頭の中、フォームの下、フォームの上などに配置しようとしましたが、どれも何もしていないようです。検証を試みずにページを送信するだけです

HTML:

<div class="content">
<h1>Submit A Lost Paw</h1>
<p>Please complete the form below. After being reviewed by a moderator, your listing will be posted for others to see.</p>

<ul id="error-box">

</ul>

<form id="test" name="test" action="test.php" method="post">
    <div class="section">
        <div class="input-title">
            <label for="pet_name">Pet Name:</label>
        </div>

        <div class="input">
            <input id="pet_name" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="date_missing">Date Pet Went Missing:</label>
        </div>

        <div class="input">
            <input id="date_missing" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="location">Location:</label>
        </div>

        <div class="input">
            <input id="location" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="age">Age:</label>
        </div>

        <div class="input">
            <input id="age" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="colors">Colors:</label>
        </div>

        <div class="input">
            <input id="colors" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="contact_name">Contact Name:</label>
        </div>

        <div class="input">
            <input id="contact_name" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="phone">Phone:</label>
        </div>

        <div class="input">
            <input id="phone" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="email">Email:</label>
        </div>

        <div class="input">
            <input id="email" type="text" />
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">
            <label for="add_details">Additional Details:</label>
        </div>

        <div class="input">
            <textarea id="add_details"></textarea>
        </div>

        <div class="clear"></div>
    </div>

    <div class="section">
        <div class="input-title">

        </div>

        <div class="input">
            <input type="submit" value="Submit for Review" />
        </div>

        <div class="clear"></div>
    </div>
</form>
</div>

Javascript:

<script type="text/javascript">     
    $(document).ready(function() {
        $("#test").validate({
            errorLabelContainer: "#error-box",
            wrapper: "li id='error'",
            rules: {
                pet_name: {
                    required: true
                }
            }
        });
    });         
</script>

現時点では、js は同じファイル内の html のすぐ下にあります。このファイル全体がインデックス ページに取り込まれ、先頭に validate.js ファイルが取り込まれます。

4

3 に答える 3

9

入力フィールドに名前属性が必要です。

<input id="pet_name" name="pet_name" type="text" />
于 2012-12-21T17:22:14.073 に答える
1

検証動作を指定するために、要素にクラスを追加していないか、プラグインで追加の javascript メソッド呼び出しを行っていないようです。

通常required、email、url、 などのクラスを追加して、検証動作を決定します (または、プラグイン メソッドを呼び出して同じことを行います。

于 2012-12-21T17:00:55.417 に答える
-1

私はあなたの頭を見たことがありませんが、必ず以下を含めてください

$(function(){
$("#test").validate();
})

jQuery.validator.setDefaults({
debug: true,
success: "valid",
submitHandler: function(form) { posting(); }

});

送信ハンドラーは必要ない場合があります。「投稿」部分は、ajax スクリプトを関数に変換し、ハンドラーで呼び出す場所です。もちろん、その周りにスクリプトタグが必要になります

于 2012-12-23T00:39:22.883 に答える