驗證插件-顯示消息

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設置為紅色邊框或任意樣式。

但是，將錯誤消息放入form字段將更加棘手。 首先，如果您的表單字段是復選框，單選按鈕或選擇菜單，則無法完成。 我可以完成文本輸入字段。 但是，我建議不要這樣做。 例如，如果您有一個必填字段“ name”，則在提交表單后，如果name字段為空，則將其設置為error，但是給定后立即給出“此字段必填”值突然之間，它不再處於錯誤狀態。 CSS高亮顯示將消失，用戶可能不會注意到名稱字段設置錯誤。

在我看來，盡管您可能還希望調查invalidHandler，但您似乎在正確的道路上探索errorPlacement函數。 “ errorPlacement”處理單個字段的錯誤。 “ invalidHandler”通常會用於在表單上顯示一般錯誤狀態。

如果您沒有為errorPlacement設置任何內容，那么validate插件將在帶有錯誤狀態的form字段之后附加一個帶有錯誤類的標簽。 因此，我通常發現您只需要為“ label.error”設置一些CSS樣式即可。 例如：

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

希望有幫助！