Link to home
Start Free TrialLog in
Avatar of webfactor
webfactor

asked on

Using jquery Validation on jquery Smart Wizard plugin

Hi there,
I was wondering if anyone has done this before. Documentation on smart wizard tells me i can build custom validation for each step, but i want to use jquery validation. I wrote allt he rules i need for step one of the wizard and i triger the validation function on leave step but validation just doesnt trigger. Better said it doesnt show errors but once you fill in the required fields it gives them a green outline meaning they pass validation. Hope to hear from you soon and hope my question makes sense:D
Regards
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Not at all without some code or a site
Avatar of webfactor
webfactor

ASKER

$('#wizard-validation').smartWizard(
 {
  // Properties
    selected: 0,  // Selected Step, 0 = first step  
    keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
    enableAllSteps: false,  // Enable/Disable all steps on first load
    transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
    contentURL:null, // specifying content url enables ajax content loading
    contentCache:true, // cache step contents, if false content is fetched always from ajax url
    cycleSteps: false, // cycle step navigation
    enableFinishButton: false, // makes finish button enabled always
    errorSteps:[],    // array of step numbers to highlighting as error steps
    labelNext:'Next', // label for Next button
    labelPrevious:'Previous', // label for Previous button
    labelFinish:'Finish',  // label for Finish button  
	enableSaveButton:false,
	hideButtonsOnDisabled:true,
	
	onLeaveStep:	function leaveAStepCallback(obj, context){
		
        if(context.toStep==2){
		validateRemovalistSetupWizzardStep1();
		
			
		}
	},
		
	
  // Events

    onShowStep:null,  // triggers when showing a step
    onFinish: storeRemovalistProfile  // triggers when Finish button is clicked
 }
); 

Open in new window

and this is the wizard init code ...
function validateRemovalistSetupWizzardStep1(){
	
var validator=$("#removalistSetup").validate({
		
  rules: {
    companyName: {
      required: true
	},abn:{
		required:true,
		digits:true
	},address:{
		required:true
	},city:{
		required:true
	},postalCode:{
		required:true,
		maxlength:4,
		digits:true
	},phone:{
		required:true,
		digits:true
	},mobile:{
		required:true,
		digits:true
	},contactPerson:{
		required:true
	},altMail:{
		email:true
	}
  }
});

Open in new window

These are the validation rules for step one that I trigger onLeaveStep of smart wizard.
You need smart wizards html code as well?
Is there anywhere I can see this in action?
ASKER CERTIFIED SOLUTION
Avatar of webfactor
webfactor

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
we fixed it ourselfs