javascript - 验证后如何应用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");

最佳答案

我总是使用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; }