使用 jquery 进行表单验证 - 突出显示错误字段答案

【问题标题】：Form Validation with jquery - Highlight Error Field使用 jquery 进行表单验证 - 突出显示错误字段
【发布时间】：2013-03-17 04:48:38
【问题描述】：

我的 jquery 验证表单需要一些帮助。除了错误文本框部分的突出显示之外，我设法让一切正常工作。我需要以下事情发生：

当某个字段的规则被破坏时，该字段必须应用黄色背景颜色并持续 3 秒；然后它变回白色。有人可以帮我解决这个问题吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js">    </script>

    <script type="text/javascript"> 
    $(document).ready(function() {  
    $("#form1").validate({ 



        rules: { 
          name: {
                  required: true,
                  minlength: 3
                },

          date: {
                  date:true
                },

          email: {// compound rule 
            required: true, 
            email: true 
                 }, 
        url: { 
          url: true 
        },


        }, 
        messages:
        { 
          name: {
          minlength: jQuery.format("At least {0} characters required.")
                }
        }




      }); 
    }); 
  </script> 


<style type="text/css"> 
    * { font-family: Verdana; font-size: 11px; line-height: 14px; } 
    .submit { margin-left: 125px; margin-top: 10px;} 
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; } 
    .form-row { padding: 5px 0; clear: both; width: 700px; } 
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; } 
    input[type=text], textarea { width: 250px; float: left; } 
    textarea { height: 50px; } 
</style> 

</head>
 <body>
      <form id="form1" method="post" action=""> 
        <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
            <div class="form-row"><span class="label">Birthdate </span><input type="text" name="date" /></div>
            <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
            <div class="form-row"><span class="label">Home page</span><input type="text" name="url" /></div> 

          <div class="form-row"><input class="submit" type="submit" value="Submit"></div> 
        </form>

    </body>
    </html>

我尝试将其插入但无法使其工作：

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
  $(element).addClass(errorClass).removeClass(validClass);
  $(element.form).find("label[for=" + element.id + "]")
                .addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
 $(element).removeClass(errorClass).addClass(validClass);
 $(element.form).find("label[for=" + element.id + "]")
                .removeClass(errorClass);
}
});

【问题讨论】：

嗨，Barmar，这就是我正在努力解决的问题。 “我试图插入这个是（上）”是我发现的，但我不知道如何将它插入到我的代码中。
但是上面的代码并没有接近你想要的，所以我不明白你为什么试图插入它。你需要用setTimeout()做一些事情3几秒钟后。
我只尝试使用该代码，因为它在 jquery“验证”中。
您知道如何使用 setTimeout 实现这样的目标吗？
$(".selector") 应该是什么？您必须将 highlight 和 unhighlight 放入原始 $("#form1").validate() 函数中（如果它应该用于 #form1）。

标签： jquery forms jquery-validate highlight

【解决方案1】：

也许这样就可以了：

$("#form1").validate({
   ...
   highlight: function(element, errorClass, validClass) {
      $(element).addClass(errorClass).removeClass(validClass);
      $(element.form).find("label[for=" + element.id + "]")
                     .addClass(errorClass);
      setTimeout(function() {
          $(element).removeClass(errorClass).addClass(validClass);
          $(element.form).find("label[for=" + element.id + "]")
                         .removeClass(errorClass);
      });
   }
});

【讨论】：

还有一个问题...我可以将其插入到消息部分的正下方吗...？
这是不正确的，$(".selector").validate()，当他的表单被称为#form1。自定义 highlight 和 unhighlight 回调必须放在 initial $("#form1").validate() 内部，如果它们是用于该表单的。
你的代码也有一些语法问题，缺少和未闭合的大括号等
我添加了缺少的括号和大括号。我认为您应该能够在其他验证选项之前或之后插入这些内容。