I have a custom card checkbox. I want to focus and scroll on form submit(form is being validated using jQuery validation) to this card checkbox if it(card checkbox) is required and not checked. How to accomplish this? Any suggestion and help would be appreciated. providing code below-
$(document).ready(function() {
$("#form").validate();
$("#form").on("submit", function(event) {
if (!$(this).valid()) {
event.preventDefault(); // Prevent form submission if invalid
}
});
});.image-checkbox .form-check-input:checked+.form-check-label .checkmark {
visibility: visible;
}
.image-checkbox .form-check-label .description {
font-size: 14px;
}
.mb-1-33rem {
margin-bottom: 1.33rem;
}
.image-checkbox img.option-img-small {
width: 100% !important;
}
.image-checkbox img.option-img-medium {
width: 100% !important;
}
.image-checkbox img.option-img-large {
width: 100% !important;
}
.option-card-small {
width: 12rem !important;
max-width: 100%;
}
.option-card-medium {
width: 18rem !important;
max-width: 100%;
}
.option-card-large {
width: 24rem !important;
max-width: 100%;
}
@media (max-width: 576px) {
.option-card-small,
.option-card-medium,
.option-card-large {
width: 100% !important;
}
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
border-radius: 12px !important;
}
.image-checkbox .form-check-label {
position: sticky !important;
display: flex !important;
align-items: start !important;
flex-direction: column !important;
cursor: pointer;
gap: 1.4rem !important;
}
.image-checkbox .form-check-label .checkmark {
position: absolute;
//top: -27px !important;
//left: -24px !important;
top: -12px !important;
left: -12px !important;
color: #24ae61 !important;
font-size: 24px;
visibility: hidden;
}
.image-checkbox .form-check-input:checked+.form-check-label img {
//border: 2px solid #23ad60 !important;
}
.option-card-small:has(.form-check-input:checked) {
border: 2px solid #23ad60 !important;
}
.image-checkbox .form-check-input {
display: none;
}
.option-card-small,
.option-card-medium,
.option-card-large {
border-radius: 0.8rem;
position: relative;
transition: transform 0.3s ease-in-out;
}
.option-card-small:hover,
.option-card-medium:hover,
.option-card-large:hover {
transform: scale(1.02);
}
.option-title {
font-size: 1.2rem;
font-weight: 600;
}
.option-description {
font-size: 1rem;
font-weight: 600;
}
.image-container {
height: 200px;
/* width: 300px;
background-color: red; */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 10px;
}
.image-container img {
max-width: 100%;
max-height: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
<div class="card mb-2" style="background-color: rgb(255, 255, 255);">
<div class="card-body">
<form id="form" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field_6" class="form-label">
<span>Multiple Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="xxx" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="xxx" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1506461883276-594a12b11cf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxMXx8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="yyy" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="yyy" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1528034342377-c406327f14b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxN3x8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span style=""><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong></span></p>
</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_2" class="form-label">
<span>Multiple Choice 3</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="zzz" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="zzz" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="aaa" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="aaa" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_13" class="form-label">
<span>
Short Text (Input)
</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="input-group">
<!----><input type="text" name="field_13" required="required" id="field_13" data-msg-required="This field is required" data-rule-startswith="hello" data-msg-startswith="should starts with hello" class="form-control">
<!---->
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_1" class="form-label">
<span>Single Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_1_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_1_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_4" class="form-label">
<span>Multiple Choice 2</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_4_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_4_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_15" class="form-label">
<span>Single Choice (Radio)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_15_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_15_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_16" class="form-label">
<span>Multiple Choice (Checkbox)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_16_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_16_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
</div>
<!---->
<div class="row mt-4 mb-2">
<div class="col-md-12 gap-2 justify-content-center d-flex">
<!---->
<!---->
<button type="submit" class="btn submit_btn ladda-button btn-primary col-6">
<!----> <span class="btn_text ladda-label"> Submit </span>
<!---->
</button>
</div>
<!---->
</div>
</form>
</div>
</div>
</div>
</div>
</div>