Getting Duplicate Error Messages with JQuery Validation Plugin

Question

I'm a newbie to JQuery and the Validation plugin.

Short Description: I wanted all of my error messages to appear in one div at the top of the form, instead of next to each label. After a little head scratching and net searching, I came up with the following, which works, but the sourceurl: message comes up twice on the validation. I haven't a clue as to why. Any help would be appreciated. Cheers, John

Source Code:

<form name="siteauth" id="siteauth" action="savedata" type="POST">
    <div class="message"></div>
    <fieldset>
        <label>Short Description:</label>
        <br><input id="shortdescription" size="75" type="text" maxlength="50"  name="shortdescription"/>
        <br><label>Source URL:</label>
        <br><input id ="sourceurl" size="75" type="text" maxlength="500"  name="sourceurl"/>
        <br><label>Callback URL:</label>
        <br><input id="callbackurl"  size="75" type="text" maxlength="500" name="callbackurl"/>
        <br><label>Callback Content:</label>
        <br><input id="in4"  size="75" type="text" maxlength="100" name="callbackcontent"/>
        <br>
        <br><input type="submit" value="Add"/>
    </fieldset>
</form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>


<script>

    $(document).ready(function(){
        $("#siteauth").validate({
            rules: {
                shortdescription: "required",
                sourceurl: "required"
            },
            messages: {
                shortdescription: "Enter a short description. ",
                sourceurl: "Enter a Source URL. "
            },
            errorElement: "div",
            wrapper: "div class=\"message\"",
            errorPlacement: function (error, element){
                error.appendTo($(".message"));
            }
        });

    });

Nick Craver · Accepted Answer · 2010-09-21 11:15:39Z

4

It's because you gave the class to the wrapper inside your error element as well, so this:

wrapper: "div class=\"message\"",

Should be just:

wrapper: "div",

Then it's not appending it to the top container and the elements it's creating inside there. You can give it a try here.

The above works, but a better solution is to use the intended property, errorLabelContainer, which is also shown/hidden automatically i there are/aren't any errors, like this:

$(function(){
    $("#siteauth").validate({
        rules: {
            shortdescription: "required",
            sourceurl: "required"
        },
        messages: {
            shortdescription: "Enter a short description. ",
            sourceurl: "Enter a Source URL. "
        },
        errorElement: "div",
        wrapper: "div",
        errorLabelContainer: ".message"
    });
});

Give that version a try here.

answered Sep 21, 2010 at 11:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

Thanks. That fixed it. BTW, is there another documentation source for the plugin that's outside of the JQuery documentation. I often find the JQuery documentation for this plugin is broken.

Nick Craver Over a year ago

@John - The main source is here: docs.jquery.com/Plugins/Validation they've been working on upgrading the doc/api site recently, it should be more stable now. Also remember to accept answers if they resolve your question :)

svk · Accepted Answer · 2010-09-21 11:30:38Z

0

Instead of using the class use the ID attribute.
For example <div class="message" id="errmsg"></div> and change the Jquery line into
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

Live example Here

edited Sep 21, 2010 at 11:30

answered Sep 21, 2010 at 11:12

svk

4,56318 gold badges66 silver badges101 bronze badges

Collectives™ on Stack Overflow

Getting Duplicate Error Messages with JQuery Validation Plugin

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related