2012-03-28 43 views
1

驗證後是否有應用淡入淡出效果的方法?例如,用戶將文本框留空,然後我會返回一個文字,說「所有字段都是必需的!」。如何在驗證後應用jQuery淡入淡出效果?

目前我有這樣的:

.successbox, .warningbox, .errormsgbox { 
    font-weight:bold; 
    border: 2px solid; 
    margin: 10px 0px; 
    padding:15px 10px 15px 70px; 
    background-repeat: no-repeat; 
    background-position: 10px center; 
    width:600px; 
} 
.errormsgbox { 
    color: #D8000C; 
    background-color:#FDD5CE; 
    background-image: url('../images/error.png'); 
} 

我返回錯誤是這樣的:

 <?php if($error) : ?> 
      <div class="errormsgbox" ><?php echo $error ?></div> 
    <?php endif ?> 

而我的JS到現在只是想:

$(".errormsgbox").fadeOut("slow"); 
+0

什麼驗證框架是您使用? – Darbio 2012-03-28 02:47:28

回答

1

我總是用JS和jQuery檢查空白字段,格式不當的電子郵件等。我傾向於做大量的Ajax,所以我也做了很多回調處理。下面是錯誤處理的一個ajax形式的例子:

function FieldValidation() 
{ 
    //selectors may vary!  
    this.whateverFields = { 
    user: $('#user_field'), 
    email: $('#email_field') 
    } 

    this.whateverForm = function() 
    { 
    var wF = this; 
    $('#form').submit(function(e){ 
     e.preventDefault(); 

     wF.resetWhateverForm(); 

     //cache just in case you want to check against multiple error types 
     var user_val = wF.whateverFields.user.val(); 
     var email_val = wF.whateverFields.email.val(); 

     var error_array = []; 
     var n = 0; 

     if(user_val === ''){ error_array[ n ] = 'user_error'; n++; } 
     if(email_val === ''){ error_array[ n ] = 'email_error'; n++; } 

     if(n > 0) 
     { 
     var len = error_array.length; 
     for(var i = 0; i < len; i++) 
     { 
      switch(error_array[ i ]) 
      { 
      case 'user_error': 
       wF.whateverFields.user.addClass('error').next().fadeIn('fast'); 
       break; 

      case 'email_error': 
       wF.whateverFields.email.addClass('error').next().fadeIn('fast'); 
       break; 

      default: 
       return false; 
      } 
     } 

     return false; 
     } 

     //do ajax now... 
    }); 
    } 

    this.resetWhateverForm() 
    { 
    for(var key in this.whateverFields) 
    { 
     if(this.whateverFields.hasOwnProperty(key)) 
     { 
     this.whateverFields[key].removeClass('error').next().hide(); 
     } 
    } 
    } 

    //pop any load-ready methods in here 
    this.intialize = function() 
    { 
    this.whateverForm(); 
    } 
    this.intialize(); 
} 

$(document).ready(function(){ 
    var fv = new FieldValidation(); 
}); 

下面是一些標記的一個例子:

<form id='form'> 
    <input id='user_field' name='user_field' type='text' /> 
    <span class='rqd_txt'>You must fill out this field.</span> 

    <input id='email_field' name='email_field' type='text' /> 
    <span class='rqd_txt'>You must fill out this field.</span> 

    <button type='submit' id='whatever'></button> 
</form> 

一些CSS:

.error{ border: 1px solid red; } 
1

我希望您通過執行頁面重新加載來顯示錯誤消息,因爲您通過PHP代碼返回錯誤。在這種情況下,您的JS代碼在$(document).ready(),它將爲您完成這項工作。

+0

我也會迭代這個 - @WonderingCoder:你會更好地實現客戶端驗證以及服務器端。它看起來像你提供服務器端的代碼,但看看我的答案中鏈接的jQuery驗證。 – Darbio 2012-03-28 02:54:57

2

jQuery provdes a fadeOut function您可以使用淡出東西放到醚:

​​

如果您正在使用jQuery Validate可以使用highlight(和unhighlight)參數,應用此fadeOut

highlight: function (element, errorClass, validClass) { 
    $(element).fadeOut(5000); 
} 

法茲它超過5秒鐘。

2

什麼時候你想讓你的錯誤消失並消失?或者你想讓它淡入並出現?

在這種情況下,

$(function() { 
    $(".errormsgbox").fadeIn("slow"); 
}); 

有它淡出頁面加載時不會給用戶太多的時間來查看錯誤。也許在用戶得到即時反饋的AJAX請求中,但在頁面重新加載之後,可能會出現。

+0

您可以在此觀看愉快的演示:http://jsfiddle.net/ArhFT/ – 2012-03-28 02:55:11