验证后如何应用jQuery淡入淡出效果?

时间:2012-03-28 02:41:47

标签: javascript jquery jquery-mobile

有没有办法在验证后应用淡入淡出效果。例如,用户将文本字段留空,然后我将返回“所有字段都需要!”的文本。

目前我有这个:

.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");

4 个答案:

答案 0 :(得分:2)

jQuery provdes a fadeOut function你可以用来将东西淡入以太:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

如果您使用的是jQuery Validate,则可以使用highlight(和unhighlight)参数来应用此fadeOut

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

在5秒内淡出。

答案 1 :(得分:2)

您希望什么时候您的错误消失并消失?或者你想让它淡入并出现?

在这种情况下,

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

在页面加载时淡出它不会给用户很多时间来查看错误。也许在用户获得即时反馈的AJAX请求中,但不是在页面重新加载之后。

答案 2 :(得分:1)

我希望您通过执行页面重新加载来显示错误消息,因为您通过PHP代码返回错误。在这种情况下,将您的JS代码放在$(document).ready()中,它将为您完成工作。

答案 3 :(得分: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; }