Count empty required fields and display error

HTML

<form action="">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="text" required="required">
    <input type="checkbox" required="required">
    <input type="text">
    <div class="click">CLICK</div>
</form>

CSS

.red { background: #ff8383 !important; }

JavaScript

$(document).ready(function () {
    $('.click').on('click', function (e) {
        e.preventDefault();
        var fields = $('input:required');
        var emptyFields = (fields.filter(function () { return !$(this).val(); }).length);
        if (emptyFields > 0) {
            fields.filter(function () { return !$(this).val(); }).addClass('red');
            fields.filter(function () { return $(this).val(); }).removeClass('red');
            alert('There are ' + emptyFields + ' empty required fields, please check the form');
        } else {
            $(this).closest('form').submit();
        }
    });
});