jQuery trigger transition on validate

Question

I'm using some jQuery to do some form validation. The following is the validation script.

$(document).ready(function() {

  $('#contact-form').validate({

    rules: {
      cf_name: {
        minlength: 2,
        required: true
      },

      cf_email: {
        required: true,
        email: true
      },

      phone: {
        minlength: 10,
        required: true
      },

      user_pass: {
        minlength: 2,
        required: true
      },

      validateSelect: {
        required: true
      },

      validateCheckbox: {
        required: true,
        minlength: 2
      },

      validateRadio: {
        required: true
      }
    },

    focusCleanup: false,
    highlight: function(label) {
      $(label).closest('.control-group').removeClass('success').addClass('error');
    },

    success: function(label) {
      label

      //.text('OK!').addClass('valid')
        .closest('.control-group').addClass('success');
    },

    errorPlacement: function(error, element) {
      error.appendTo(element.parents('.controls'));
    }
  });
  $('.form').eq(0).find('input').eq(0).focus();
}); // end document.ready

On my submit button, I have this code:

 <input type="submit" value="SUBMIT" id="sub" class="sub_text">

I'd like to make it so that when a user clicks the submit button and the form validates before it does any fading/transitioning, that it does within this code:

$("#sub").click(function(){

    $("#forms").fadeOut( 1000 );        
    $("#overlay1").delay(1000).fadeIn( 1000 );        

});

But my problem is that if a user forgets a field and then hits submit, the overlay transition happens. I'd like it to only happen when there's a success of validation.

How am I able to trigger the event only when it's validated?

Answer 1

You are using the wrong hook. You are attaching your fadein code into "click" event of the button, means just when the user clicks the button you will execute the fadein.

Solution? quite simple, just have a look at the jqueryvalidation doc (http://jqueryvalidation.org/validate), instead of fadein in click event of the button, just do it in the validation hook.

$('#contact-form').validate({
  submitHandler: function(form) {
    $("#forms").fadeOut( 1000 );        
    $("#overlay1").delay(1000).fadeIn( 1000 );   
    // do other things for a valid form
    form.submit();
  }
});

Answer 2

Have you tried calling form.valid() as follows:

$("#sub").click(function(){
    if($('#contact-form').valid()){
        $("#forms").fadeOut( 1000 );        
        $("#overlay1").delay(1000).fadeIn( 1000 ); 
    }       
});

.valid() checks whether given form is valid or not.