Question

我是JQuery和Validation插件的新手。

简短说明：我希望我的所有错误消息都显示在表单顶部的一个div中，而不是显示在每个标签旁边。经过一番小小的搜索和网络搜索之后，我想出了以下内容，它有效，但是sourceurl：消息在验证时出现了两次。我不知道为什么。任何帮助，将不胜感激。干杯，约翰

源代码：

<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"));
            }
        });

    });

Answer 1

这是因为你将类赋予了错误元素中的包装器，所以这个：

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

应该只是：

wrapper: "div",

然后它不会将它附加到顶部容器和它们在那里创建的元素。 You can give it a try here

上述工作，但更好的解决方案是使用预期属性errorLabelContainer，它也会自动显示/隐藏我有/没有任何错误，如下所示：

$(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

Answer 2

使用ID属性而不是使用类例如 <div class="message" id="errmsg"></div>并将Jquery行更改为
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

实例Here

使用JQuery Validation插件获取重复的错误消息

2 个答案: