Question

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

Answer 1

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