0

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

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

$(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'));
    }
});

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

4

1 回答 1

1

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

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

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

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

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

在我看来，您正在探索 errorPlacement 函数的正确轨道，尽管您可能还希望调查 invalidHandler。“errorPlacement”处理单个字段的错误。“invalidHandler”更典型地用于在表单上显示一般错误状态。

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

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

希望有帮助！

于 2013-03-01T02:31:51.130 回答