Hi,
Firstly thank you for a great template. We have gone live with it. I've just paid for an additional 6 months support as I can see this template being of much use.
I really need a full example of how to incorporate Process Steps with validation and handlers for when each step is continued.
Ideally I would like to use jquery.validate.min, but for some reason this doesn't inititalise with a Process Steps form. I cannot see where the problem is.
I need beforeActive, active handlers etc with custom placement of errors working to ensure all elements are complete before proceeding to next step. I would also like to go to previous step without concern if current step isn't validated (only progression). Having granular control of each step is important to create intricate forms.
->main.php
/process.php" id="smart-form">
-
[1](#ptab-1)
Start
-
[2](#ptab-2)
What did we do
well?
-
[3](#ptab-3)
What did we do
less well?
-
[4](#ptab-4)
What can we do
differently next time?
-
[5](#ptab-5)
On a scale of 1-5
please rate us?
-
[](#ptab-6)
Finished
Intro Message
[Continue ⇒](#)
Please let us know what we did well?
[Previous](#)
[Continue](#)
Please let us know what we didn't do so well on?
[Previous](#)
[Continue](#)
What can we do differently next time?
[Previous](#)
[Continue](#)
And finally, please provide an overall rating:
[Previous](#)
[Submit](#)
Thanks
"
data-version=""
data-clientIdentifier=""
data-readToken=""
data-ClientID=""
data-ClientName=""
data-ClientFirstName=""
data-ClientLastName=""
data-ClientEmail=""
>
->main.js
validateForm:function(form){
//console.log("validating form");
self=this;
var frm = form.serializeJSON();
ytlFormValidator=form.validate({
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
onkeyup: false,
onclick: false,
//ignore: [],
rules: {
mainForm_q1: { required: true },
mainForm_q2: { required: true },
mainForm_q3: { required: true },
mainForm_q4: { required: true },
},
messages:{
mainForm_q1: { required: 'Please help answer this question' },
mainForm_q2: { required: 'Please help answer this question' },
mainForm_q3: { required: 'Please help answer this question' },
mainForm_q4: { required: 'Please help answer this question' },
},
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
$(element).closest('.field').find('.error-msg').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
$(element).closest('.field').find('.error-msg').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
//self.clearConsole();
if (element.is(":radio") || element.is(":checkbox")) {
$('.custom-error-placement').html(error);
$(element).closest('.field').find('.error-msg').html(error);
} else {
//error.insertAfter(element.parent());
$('.custom-error-placement').html(error);
}
},
invalidHandler: function(e,validator) {
//self.clearConsole();
for (var i=0;i<validator.errorList.length;i++){
//console.log(validator.errorList[i]);
}
for (var i in validator.errorMap) {
//console.log(i, ":", validator.errorMap[i]);
}
}
});
},