验证插件 - 显示消息

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> 

希望有帮助！