CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Wondering Coder
Wondering Coder

Reputation: 1702

How to apply jQuery fade effect after validation?

Is there a way to apply fade effect after validation. For example the user leave a textfield blank, then I'll return a text saying "All Fields Are Required!".

Currently I have this:

.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');
}

I'm returning the error like this:

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

And my js up to now is just like:

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

Upvotes: 1

Views: 1602

Answers (4)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

I always check for blank fields, poorly formatted emails, etc. with JS and jQuery. I tend to do a lot of ajax, so I also do a lot of callback handling along these lines. Here's an example of handling errors for an ajax form:

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();
});

Here's an example of some markup:

<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>

Some css:

.error{ border: 1px solid red; }

Upvotes: 1

Kyle Macey
Kyle Macey

Reputation: 8154

When do you want your error to fade out and disappear? Or do you want it to fade in and appear?

In which case,

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

Having it fade out when the page loads wouldn't give the user much time to see the error. Maybe on an AJAX request where the user gets instant feedback, but not after a page reload, methinks.

Upvotes: 2

Darbio
Darbio

Reputation: 11418

jQuery provdes a fadeOut function which you can use to fade things into the ether:

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

If you are using jQuery Validate you can use the highlight (and unhighlight) parameters to apply this fadeOut

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

Fades it out over 5 seconds.

Upvotes: 2

Epuri
Epuri

Reputation: 300

I hope you are showing error message by doing page reload as you are returning error through PHP code. In that case have your JS code in $(document).ready() and it will do the job for you.

Upvotes: 1

Related Questions