jQuery validation plugin not functioning

问题

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:

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

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.

回答1:

you need name attributes on the input fields eg

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

回答2:

It seems that you have not added any classes to your elements or done any additional javascript method calls on the plug-in in order to specify the validation behavior.

Typically you would add classes such as required, email, url, etc. to determine the validation behavior (or alternatively call plug-in methods to do the same.

回答3:

I havent seen your head, buit be sure to include the following

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

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

});

You may not need the submit hander, the "posting" part is where you turn your ajax script into a function and call it with the handler. Of course you will need script tags around that

来源：https://stackoverflow.com/questions/13994101/jquery-validation-plugin-not-functioning