P
pmudliarAug 6, 2020
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
<div id="processTabs">
<form method="post" action="<?php echo '/modules/'.$_REQUEST['module'].'/version/'.$_REQUEST['version'];?>/process.php" id="smart-form">
<ul class="process-steps bottommargin clearfix d-none d-lg-block">
<li>
<a href="#ptab-1" class="i-circled i-bordered i-alt divcenter">1</a>
<h5>Start</h5>
</li>
<li>
<a href="#ptab-2" class="i-circled i-bordered i-alt divcenter">2</a>
<h5>What did we do
well?</h5>
</li>
<li>
<a href="#ptab-3" class="i-circled i-bordered i-alt divcenter">3</a>
<h5>What did we do
less well?</h5>
</li>
<li>
<a href="#ptab-4" class="i-circled i-bordered i-alt divcenter">4</a>
<h5>What can we do
differently next time?</h5>
</li>
<li>
<a href="#ptab-5" class="i-circled i-bordered i-alt divcenter">5</a>
<h5>On a scale of 1-5
please rate us?</h5>
</li>
<li>
<a href="#ptab-6" class="i-bordered i-circled divcenter icon-ok"></a>
<h5>Finished</h5>
</li>
</ul>
<div id="processTabsContent">
<div id="ptab-1">
<div class="alert-info spacer-t30 mb40 start-alert">
<p class="text-centerX">Intro Message</p>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="2">Continue ⇒</a>
</div>
<div id="ptab-2">
<div class="form-group field">
<label for="mainForm_q1">Please let us know what we <span class="text-green2">did</span> well? </label>
<textarea class="form-control requiredX field" id="mainForm_q1" rows="5" name="mainForm_q1"></textarea>
<div class="error-msg"></div>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin button-light tab-linker" rel="1">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="3">Continue</a>
</div>
<div id="ptab-3">
<div class="form-group">
<label for="mainForm_q2">Please let us know what we <span class="text-red">didn't</span> do so well on? </label>
<textarea class="form-control requiredX" id="mainForm_q2" rows="5" name="mainForm_q2"></textarea>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin button-light tab-linker" rel="2">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="4">Continue</a>
</div>
<div id="ptab-4">
<div class="form-group">
<label for="mainForm_q3">What can we do <span class="text-blue2">differently</span> next time? </label>
<textarea class="form-control requiredX" id="mainForm_q3" rows="5" name="mainForm_q3"></textarea>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin button-light tab-linker" rel="3">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="5">Continue</a>
</div>
<div id="ptab-5">
<div class="white-section centralise-stars">
<label>And finally, please provide an overall rating:</label>
<input id="mainForm_q4" class="rating requiredX" data-size="md" value="0" name="mainForm_q4">
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin button-light tab-linker" rel="4">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="6">Submit</a>
</div>
<div id="ptab-6">
<p>Thanks</p>
</div>
<!-- END OF TABS -->
<input type="hidden" id="php-vars"
data-module="<?php echo @$_REQUEST['module'];?>"
data-version="<?php echo @$_REQUEST['version'];?>"
data-clientIdentifier="<?php echo @$_REQUEST['clientIdentifier'];?>"
data-readToken="<?php echo @$_REQUEST['readToken'];?>"
data-ClientID="<?php echo $client['id'];?>"
data-ClientName="<?php echo $client['Name'];?>"
data-ClientFirstName="<?php echo $client['FirstName'];?>"
data-ClientLastName="<?php echo $client['LastName'];?>"
data-ClientEmail="<?php echo $client['EmailAddress'];?>"
>
</div>
</form>
</div>
</div>->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]);
}
}
});
},