jQuery validation plugin not functioning

Question

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.

What exactly are you validating? None of the fields are marked "required" and you haven't defined any rules in the "validate" call. What error messages are you expecting to see? — Andrew Whitaker, Dec 21 '12 at 16:57
Apologies, I've been trying different ways of doing it and posted the incorrect js. Updated. — ohiock, Dec 21 '12 at 17:08

score 9 · Accepted Answer · answered Dec 21 '12 at 17:22

9

you need name attributes on the input fields eg

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

answered Dec 21 '12 at 17:22

politus

5,996
1
33
42

Amazing... now I feel like a moron. Thanks for taking the time to answer. – ohiock Dec 21 '12 at 17:29

score 1 · Answer 2 · answered Dec 21 '12 at 17:00

1

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.

answered Dec 21 '12 at 17:00

Mike Brant

70,514
10
99
103

I posted the incorrect js, I've been trying a few different methods. Updated. This still does not work. – ohiock Dec 21 '12 at 17:08

score -1 · Answer 3 · answered Dec 23 '12 at 00:39

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

jQuery validation plugin not functioning

3 Answers3

Linked

Related