jQuery 表单验证 - 在计时器上突出显示字段答案

【问题标题】：jQuery Form Validation - Highlight Field on a TimerjQuery 表单验证 - 在计时器上突出显示字段
【发布时间】：2013-03-17 06:56:13
【问题描述】：

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

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

这是我在 jsfiddle 的代码： http://jsfiddle.net/dawidspamer/qmY5j/

或

<!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 ></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>

我不知道从哪里开始，希望有人能够帮助我解决这个问题。我非常感谢所有的帮助。

【问题讨论】：

标签： jquery forms validation timer highlight

【解决方案1】：

您需要的是一个临时设置背景颜色的highlight 函数，因此您可以将其添加到您的validate 选项中：

 highlight: function (element, errorClass, validClass) {
     $(element).addClass(errorClass).removeClass(validClass).css('background-color','yellow');
     var ele = $(element);
     setTimeout(function () {
         ele.css('background-color','white');
     }, 3000);
 }

结果如下所示：http://jsfiddle.net/ryleyb/bMfsW/1/

【讨论】：