Solved

Using  jquery Validation on jquery Smart Wizard plugin

Posted on 2013-06-16
5
3,207 Views
Last Modified: 2013-06-28
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
0
Comment
Question by:webfactor
  • 3
  • 2
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39251590
Not at all without some code or a site
0
 

Author Comment

by:webfactor
ID: 39252849
$('#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?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39253069
Is there anywhere I can see this in action?
0
 

Accepted Solution

by:
webfactor earned 0 total points
ID: 39265986
we fix the issue. thanks for your assistance anyway.

basicly what we did was applie the validation rules before initialising the wizard form and using .valid() function on leave step to check if all fields r filled in
0
 

Author Closing Comment

by:webfactor
ID: 39283807
we fixed it ourselfs
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question