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

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

Answer 1

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

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

这通常可以帮助诊断问题。

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

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

在我看来，您正在探索errorPlacement函数，但您可能还希望调查invalidHandler。 “errorPlacement”处理单个字段的错误。 “invalidHandler”通常用于在表单上显示一般错误状态。

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

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

希望有所帮助！

验证插件 - 显示消息

1 个答案: