修改 jquery 验证插件以在输入字段中显示消息

Question

请问有谁知道我如何在“记住牛奶”示例中的 jquery 验证插件 (http://jquery.bassistance.de/validate/demo/milk/#) 中获取错误/成功消息以显示在输入字段。

我的表格装在很小的盒子里。我做了一些研究并弄乱了网站上使用的脚本。我看到消息被附加到表单标签的位置，但我不知道获取错误/成功消息以显示在输入字段中所需的 jquery 方法。另请记住，牛奶使用的表格是我的表格，我没有这样做。我的表单与 jquery 验证页面上的演示几乎相同。

jquery 验证插件：http://docs.jquery.com/Plugins/Validation#demo

谢谢。

Answer 1

您可以在该输入元素旁边放置一个 div 或 span。最初 div 将被隐藏，根据验证您可以显示或隐藏 div 将显示错误消息。

我只是尝试一个样本..

html

<input type="text" name="email" id="email"/>
<div id="errorDiv" style="display:none">Error Message</div>
<div id="okDiv" style="dispaly:none">Ok</div>

脚本

$(document).ready(function(){
  $("#myForm").validate({
    rules: {
               email:{
                  required: function (element) {
                      if($(element).text()=="")
                      {
                          $('#errorDiv').show();
                          $('#okDiv').hide();
                      }
                      else
                      { 
                          $('#errorDiv').hide();
                          $('#okDiv').show();
                      } 
                  }
           }
  });
});

就这样试试