Button click Checkbox checked validator

Button click Checkbox checked validator

by Ankit Patidar

HTML

<div>
    <label>
        <input type="checkbox" class="checkboxBtn">My checkbox1</label>
</div>
<div>
    <label>
        <input type="checkbox" class="checkboxBtn">My checkbox2</label>
</div>
<div>
    <label>
        <input type="checkbox" class="checkboxBtn">My checkbox3</label>
</div>
<div>
    <label>
        <input type="checkbox" class="checkboxBtn">My checkbox4</label>
</div>
<div>
    <label>
        <input type="checkbox" class="checkboxBtn">My checkbox5</label>
</div>
<div class="formError hide">Select at least one checkbox.</div>
<div>
    <button class="checkValid">Check validator</button>
</div>

CSS

.formError {
    animation: 1s linear 0s normal none infinite running error-stripes;
    background-color: #cf432c;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 25px 25px;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-weight: 600;
    padding: 6px 10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.hide {
    display:none
}

JavaScript

$(".checkValid").click(function () {
    if ($(".checkboxBtn:checked").length <= 0) {
        $(".formError").removeClass("hide");
    } else {
        $(".formError").addClass("hide");
    }
});