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
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
Not at all without some code or a site
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
}
);
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
}
}
});
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
we fixed it ourselfs