驗證插件 - 顯示消息

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設置爲紅色邊框或任何你喜歡的東西。

但是，將錯誤消息放在表單字段中會更棘手。首先，如果您的表單域是複選框，單選按鈕或選擇菜單，則無法完成。我可以爲文本輸入字段完成。不過，我建議不要這樣做。例如，如果您有一個必填字段「名稱」，只要提交表格，如果名稱字段爲空，它將被設置爲錯誤，但是如果立即給定值「此字段是必需的」並突然它不再處於錯誤狀態。 CSS突出顯示將消失，用戶可能不會注意到名稱字段設置錯誤。

在我看來，你在正確的軌道上探索errorPlacement函數，雖然你也可能希望調查invalidHandler。 「errorPlacement」處理單個字段的錯誤。 「invalidHandler」更通常用於在表單上顯示一般錯誤狀態。

如果您沒有爲errorPlacement設置任何內容，則驗證插件會在出現錯誤狀態的表單字段後附加一個標籤，其中包含錯誤類。所以，我通常會發現你只需要爲「label.error」設置一些CSS樣式。例如：

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

希望有幫助！