HTML
<section class="demo-section">
<form action="" method="POST" id="demoForm">
<div class="container demo-container">
<div class="demo-image"></div>
<div class="row justify-content-between">
<div class="col-md-3 col-checkbox">
<input type="checkbox" name="demo-checkboxes" id="checkbox-01">
<label for="checkbox-01">Sunglasses</label>
</div>
<div class="col-md-3 col-checkbox">
<input type="checkbox" name="demo-checkboxes" id="checkbox-02">
<label for="checkbox-02">Pencils</label>
</div>
<div class="col-md-3 col-checkbox">
<input type="checkbox" name="demo-checkboxes" id="checkbox-03">
<label for="checkbox-03">Shoes</label>
</div>
<div class="col-md-3 col-checkbox">
<input type="checkbox" name="demo-checkboxes" id="checkbox-04">
<label for="checkbox-04">Notepad</label>
</div>
</div>
</div>
<div id="submit-message"></div>
<div class="text-center submit-button-container">
<input class="btn btn-primary submit-button" type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
</section>
CSS
.demo-container {
padding: 2em;
background-image: linear-gradient(to top, #ececec 0%, #ffffff 100%);
}
.demo-image {
width: 100%;
height: 340px;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-size: cover;
margin-bottom: 1em;
}
/* checkboxes */
.col-checkbox input {
display: none;
}
.col-checkbox label {
display: block;
position: relative;
padding: 10px 0 4px 40px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.30);
color: rgba(0, 0, 0, 0.30);
cursor: pointer;
text-align: right;
}
.col-checkbox label::before {
content: '';
display: block;
position: absolute;
top: 10px;
left: 0;
width: 24px;
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.30);
}
.col-checkbox label:hover, input:focus + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 1.00);
}
.col-checkbox label::before:hover {
border: 1px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 0, 1.00);
}
.col-checkbox label:hover::before {
border: 2px solid rgba(0, 0, 0, 0.60);
}
.col-checkbox input:checked + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 0.90);
}
.col-checkbox input:checked + label::before {
position: absolute;
font-family: 'FontAwesome';
font-size: 16px;
content: '\f00d';
border: 1px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 255, 0.90);
font-weight: bold;
text-align: center !important;
}
.input-error {
position: relative;
text-align: center;
padding: 4px 20px 0 20px;
color: rgba(154, 0, 0, 0.60);
}
.input-error::after {
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
content: "\f25a";
top: 5px;
right: 0;
}
.input-error::before {
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
content: "\f25a";
top: 5px;
left: 0;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.submit-button-container {
margin-top: 1em;
}
.submit-button {
width: 100%;
}
#submit-message {
margin-top: 10px;
}
.input-submitted {
text-align: center;
color: rgba(0, 102, 49, 0.60)
}
JS
$(function() {
$('#submit').click(function() {
if ($('input[name="demo-checkboxes"]:checked').length == 0) {
$("#submit-message").html('<div class="input-error">Please check at least one item</div>');
$("#submit").addClass("btn-warning");
return false;
}
else {
$("#submit").removeClass("btn-warning");
return true;
}
});
});
Alternate table row styles
Conditional formatting of table rows
Copy text to clipboard
Disable spaces in an input field
Multi step form with progress indicator
Read more or less
Remove the leading and trailing space
Short functions
Toggle visibility with a slide effect
Toggle visibility without pushing content down
Validate checkboxes
Validate input fields
Validate radio buttons
Validate TinyMce editor