jquery - 验证插件 - 显示消息

Question

jquery版本:1.9.0
验证插件:http://docs.jquery.com/Plugins/Validation

我想实现将字段输入变为红色并在其中显示错误消息的效果 - 我该怎么做？目前，我无法在任何地方显示错误。验证有效，一切似乎都正常，我的字段具有相同值的 id 和名称......但什么也没发生。这是我的代码:

$(document).ready(function() {
        $("#form").validate({
            rules: {
                username: {
                    remote: {
                        url: '<?php echo URL::base(TRUE, TRUE); ?>form/validate/rules',
                        type: "POST",
                        data: {
                            <?php // some data ?>
                        }
                    }
                },
            },
            messages {
                username {
                        remote: "Fdsfdsfsdfdfs"
                }
            }
        });
});

这是我的 HTML:

<form action="..." method="post" id="form" accept-charset="utf-8">  <div id="input-text" class="input">
    <label for="username">fdsfsd</label>
    <input 

                type="text"
        name="username"
        id="username"

        value=""
        style="" />
</div>
<div id="input-text" class="input">
    <label for="aaa"></label>
    <input 

                type="text"
        name="aaa"
        id="aaa"

        value=""
        style="" />
</div>
<div id="input-submit" class="input">
    <input 
        type="submit"
        name="submit"
        id=""
                value="submit"
        style="" />
</div>

<script type="text/javascript">
// script from above
</script>
</form><div id="form-errors"></div>

我试过这个:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().find('div.form-errors'));
    }
});

但是也不管用，firebug 中出现一些“找不到方法”的错误...我找不到解决这个问题的方法，你能帮我吗？我想我已经很好地描述了我的问题。

Answer 1

如果您在使用此插件时遇到问题，您可以打开调试以获得一些帮助:

$("#form").validate({
   debug: true,
   ...rest of the options
});

这可能有助于诊断一般问题。

您说您想要“字段输入红色并在其中显示错误消息”。如果该字段处于错误状态，验证插件应该给该字段一个 CSS 类“error”(如果您愿意，您可以设置“errorClass”选项将其更改为另一个类)。因此，您可以将 input.error 的样式设置为红色边框或任何您喜欢的样式。

但是，将错误消息放在表单字段中会更加棘手。首先，如果表单字段是复选框、单选按钮或选择菜单，则无法完成。我可以完成文本输入字段。但是，我建议不要这样做。例如，如果您有一个必填字段“name”，一旦提交表单，如果 name 字段为空，它将被设置为错误，但立即给出“This field is required”的值突然间它不再处于错误状态。 CSS 突出显示将消失，用户可能不会注意到名称字段设置错误。

在我看来，您探索 errorPlacement 函数的方向是正确的，尽管您可能还希望研究 invalidHandler。 “errorPlacement”处理单个字段的错误。 “invalidHandler”更通常用于在表单上显示一般错误状态。

如果您没有为 errorPlacement 设置任何内容，验证插件会在处于错误状态的表单字段后附加一个带有错误类别的标签。所以，我通常发现你只需要为“label.error”设置一些CSS样式。例如:

<style>
    label.error {
        border: 1px solid red;
        color: red;
    }
</style>

希望对您有所帮助!