jQuery表單驗證 - 突出顯示定時器上的字段

我需要我的jQuery驗證表單的一些幫助。除了錯誤文本框部分的突出顯示之外，我設法讓所有內容都能正常工作。我需要以下幾種情況發生：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>

我不知道從哪裏開始就這個問題和希望有人能幫助我與此有關。我非常感謝所有的幫助。

來源

2013-03-27 tidydee

你需要的是一個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/

來源

2013-03-27 15:45:30 Ryley

jQuery表單驗證 - 突出顯示定時器上的字段

回答

相關問題