Question

Anyone has done stylised radio buttons, checkboxes and maybe even dropdowns which works with jQuery validate?

Example: If I tick a required custom styled checkbox, the hidden actual checkbox checks and triggers revalidation.

Answer 1

Digged into it since there is no answer.

Here is what I’ve got, very basic still but works, feel free to improve the code.

(function ($) {
    $.fn.styliseForm = function () {

        var inputs = this.find('input[type=checkbox], input[type=radio]');

        inputs.each(function () {
            var t = $(this),
            type = '',
            cl = 'hdn';
            if (t.is(':checkbox')) {
                type = 'checkbox';
            }
            if (t.is(':radio')) {
                type = 'radio';
            }
            if (t.is('checked')) { cl = 'b-hdn active'; }
            t.before('<span class="b-' + type + '" data-name="' + t.attr('name') + '" />').addClass(cl);
        });

        $('.b-radio, .b-checkbox').each(function () {
            var t = $(this),
            next = t.next(),
            inputGroup = $('input[name=' + t.attr('name') + ']');

            t.click(function () {
                if (t.is('.b-radio')) {
                    $('span[data-name=' + t.attr('data-name') + ']').removeClass('active');
                    t.addClass('active');
                    next.attr('checked', true);
                    inputGroup.not(next).attr('checked', false);
                }
                if (t.is('.b-checkbox')) {
                    t.toggleClass('active');
                    next.attr('checked', t.hasClass('active'));
                    if (next.attr('class').indexOf('{') > -1 && t.hasClass('active')) { next.valid(); }
                }
            });

            if (next.is(':checked')) {
                t.addClass('active');
            }
        });
    }
})(jQuery);

$('#exampleForm').styliseForm();