jQuery验证插件无法正常工作 [英] jQuery validation plugin not functioning

问题描述

我似乎无法弄清楚问题出在哪里.我试图将我的js放在我的脑海中，在表单下方，在表单上方等.它们似乎什么都没做.它只是提交页面而没有尝试验证

I can't seem to figure out what the issue is here. I've tried putting my js in my head, below my form, above my form, etc. None of them seem to do anything. It just submits the page without even attempting to validate

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:

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文件.

As of right now, the js is directly below the html, in the same file. This whole file is pulled into an index page which has the validate.js file pulled in at the head.

推荐答案

您需要在输入字段上输入名称属性，例如

you need name attributes on the input fields eg

<input id="pet_name" name="pet_name" type="text" />

这篇关于jQuery验证插件无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！