I have a form wizard and I want to use checkboxes. The problem is when I make a checkbox required it is not recognized by the wizard so it will go to the next step/tab even if the checkbox is not checked. On the last step it shows that a field is still required (the checkbox that wasn't checked). It works fine with regular inputs like text, number, select.
UPDATE: added code snippet and it works here. Maybe I'm using a wrong jquery version?
$(".wizard-horizontal").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
// vertical Wizard //
// ------------------------------
$(".wizard-vertical").steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "fade",
enableAllSteps: true,
stepsOrientation: "vertical",
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
// Validate steps wizard //
// -----------------------------
// Show form
var stepsValidation = $(".wizard-validation");
var form = stepsValidation.show();
stepsValidation.steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#',
labels: {
finish: 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
// Initialize validation
stepsValidation.validate({
ignore: 'input[type=hidden]', // ignore hidden fields
errorClass: 'danger',
successClass: 'success',
highlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
rules: {
email: {
email: true
}
}
});
// live Icon color change on state change
$(document).ready(function () {
$(".current").find(".step-icon").addClass("bx bx-time-five");
$(".current").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#5A8DEE'
});
});
// Icon change on state
// if click on next button icon change
$(".actions [href='#next']").click(function () {
$(".done").find(".step-icon").removeClass("bx bx-time-five").addClass("bx bx-check-circle");
$(".current").find(".step-icon").removeClass("bx bx-check-circle").addClass("bx bx-time-five");
// live icon color change on next button's on click
$(".current").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#5A8DEE'
});
$(".current").prev("li").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#39DA8A'
});
});
$(".actions [href='#previous']").click(function () {
// live icon color change on next button's on click
$(".current").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#5A8DEE'
});
$(".current").next("li").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#adb5bd'
});
});
// if click on submit button icon change
$(".actions [href='#finish']").click(function () {
$(".done").find(".step-icon").removeClass("bx-time-five").addClass("bx bx-check-circle");
$(".last.current.done").find(".fonticon-wrap .livicon-evo").updateLiviconEvo({
strokeColor: '#39DA8A'
});
});
// add primary btn class
$('.actions a[role="menuitem"]').addClass("btn btn-primary");
$('.icon-tab [role="menuitem"]').addClass("glow ");
$('.wizard-vertical [role="menuitem"]').removeClass("btn-primary").addClass("btn-light-primary");<link href="https://intermissions.tech/origin/app-assets/css/plugins/forms/wizard.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://intermissions.tech/origin/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="https://intermissions.tech/origin/app-assets/vendors/js/extensions/jquery.steps.min.js"></script>
<section id="validation">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header pb-0">
<h4 class="card-title">Conference registration</h4>
</div>
<div class="card-content">
<div class="card-body">
<form action="#" class="wizard-validation">
<!-- Step 1 -->
<h6>
<i class="step-icon"></i>
<span>Legal Affirmation</span>
</h6>
<!-- Step 1 -->
<!-- body content of step 1 -->
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<fieldset>
<div class="checkbox checkbox-primary checkbox-glow">
<input type="checkbox" id="confirm_english" name="test" required>
<label for="confirm_english">my checkbox</label>
</div>
</fieldset>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastName3">Last Name</label>
<input type="text" class="form-control" id="lastName3" name="email" placeholder="Enter Your Last Name" required>
</div>
</div>
</div>
</fieldset>
<!-- body content of step 1 end -->
<!-- Step 2 -->
<h6>
<i class="step-icon"></i>
<span>Attendence and Services</span>
</h6>
<!-- step 2 -->
<!-- body content of step 2 end -->
<fieldset>
</fieldset>
<!-- body content of step 2 end -->
<!-- Step 3 -->
<h6>
<i class="step-icon"></i>
<span>Conference Payment</span>
</h6>
<!-- step 3 end -->
<!-- step 3 content -->
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="eventStatus3">Event Status</label>
<select class="custom-select form-control required" id="eventStatus3" name="eventStatus">
<option></option>
<option value="Planning">Planning</option>
<option value="In Progress">In Progress</option>
<option value="Finished">Finished</option>
</select>
</div>
</div>
</div>
</fieldset>
<!-- step 3 content end-->
<!-- Step 4 -->
<h6>
<i class="step-icon"></i>
<span>Payment Confirmation</span>
</h6>
<!-- step 4 end -->
<!-- step 4 content -->
<fieldset>
</fieldset>
<!-- step 4 content end-->
</form>
</div>
</div>
</div>
</div>
</div>
</section>