Как применить эффект затухания jQuery после проверки?

Question

Есть ли способ применить эффект затухания после проверки. Например, пользователь оставит текстовое поле пустым, а затем я верну текст с надписью «Все поля обязательны для заполнения!».

В настоящее время у меня есть это:

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

Answer 1

jQuery предоставляет fadeOut функцию , которую вы можете использовать для затухания вещей в эфир:

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

Если вы используете Проверка jQuery , вы можетеиспользуйте параметры highlight (и unhighlight) для применения этого fadeOut

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

Исчезает через 5 секунд.

Answer 2

Когда вы хотите, чтобы ваша ошибка исчезла и исчезла? Или вы хотите, чтобы оно появилось и появилось?

В этом случае

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

Исчезновение при загрузке страницы не даст пользователю много времени, чтобы увидеть ошибку. Возможно, по запросу AJAX, когда пользователь получает мгновенную обратную связь, но не после перезагрузки страницы.

Answer 3

Я всегда проверяю пустые поля, плохо отформатированные электронные письма и т. Д. С помощью 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; }

Answer 4

Я надеюсь, что вы выводите сообщение об ошибке при перезагрузке страницы, когда вы возвращаете ошибку через код PHP. В этом случае укажите свой JS-код в $(document).ready(), и он сделает всю работу за вас.