mpf_script1

mpf_script1.js

$(function(){
    //jquery multipage behaviour
    $('#multipage').multipage({transitionFunction:transition, 
                                                  'navigationFunction': function(pages){},
                                                   'inactiveDot': '<img src="http://dummyimage.com/10x10/cccccc/cccccc.png" style="margin-right: 5px">',
                                                   'activeDot': '<img src="http://dummyimage.com/10x10/c27daf/c27daf.png" style="margin-right: 5px">'
    });

    // progresses user to next page on clicking option one or two on the front page
    $("#option1, #option2").click( function(){        
        $('#multipage').nextpage();    
        $('#email,#name').blur();        
    });
    // handles previous/next page click
    $('.multipage_back').click(function(){            
            $('#multipage').prevpage();
    });
    $('.multipage_next').click(function(){
        if(!validate())  return false;
        $('#multipage').nextpage();                        
    });    
    //placeholder
    $('[placeholder]').addClass('red');
    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {          
        input.val('');              
      }
    })
    .blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {        
        input.val(input.attr('placeholder'));        
      }
      })
    .click(function(){
          $(this).removeClass('red');
      }).
      blur();
    
    // jquery validate behaviour
    $('#multipage').validate(
    {
    onfocusout: function(element) { jQuery(element).valid();} ,
    rules: {
    name: {
    minlength: 2,
    required: true,
    fill : true
    },
    email: {
    required: true,
    email: true
    },
    message: {
    minlength: 2,
    required: true,
    fill : true
    }
    },
    messages: {
    name: "validating...please enter your name",
    email: {
    required: "validating...please enter your email",
    email: "validating...please enter a valid email"
    },
    message: "validating...please enter your message"
    },
    highlight: function(label) {
    $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
    label
    .text('OK!').addClass('valid')
    .closest('.control-group').addClass('success');
    }
    });  
    //adding a custom validation 
    jQuery.validator.addMethod("fill", function(value, element) {
            return this.optional(element) || value != $(element).attr('placeholder');
    }, "validating...please enter a valid value");  
   
})

function transition(from,to) {   
    $(from).fadeOut('fast',function(){$(to).fadeIn('fast');});
};

function validate(){    
     var er=false;
     var fieldset=$('fieldset.active');
     fieldset.find('.control-group input,.control-group textarea').each(function(){         
         if(!$(this).valid()){
            er=true;
            $(this).fadeOut('fast',function(){$(this).fadeIn('fast')});
         }            
     });     
     return !er;
};

function formSubmit(){
    if(!validate())  return false;            
    $('#multipage,#multipage_nav').hide('fast');
    $('#loader').show('fast');        
    $.post('ajax.php',$('#multipage').serialize(),function(data){                
            $('#loader').hide('fast');
            if(data.ok){
                $('#multipage').after('<div class="msg_ok">'+data.msg+'</div>');
                setTimeout(function() {window.location.href = data.redirect;}, 2500);
            }else{
                $('#multipage,#multipage_nav').show('fast');
                $('#multipage').after('<div class="msg_error">'+data.msg+'</div>');
            }        
    },'json')
}