Validate multiple checkboxes, minimum one required

Question

We are creating a advertising form, and our jQuery coder is in Syria, and unfortunately caught up in the ugliness there.

So whilst he at present cannot assist with some code he made for us, I have an issue I think could be solved quite easily.

We have a stepped form, you know: Complete step 1, move on to step 2 etc etc. On step 4, we have multiple checkboxes, that we require a user to check at least ONE.

If they check ONE they can proceed to the next step.. if they don't click any we show an error message.

So this is our js:

(function($) {
$.fn.formToWizard = function(options) {
    options = $.extend({  
        submitButton: "" 
    }, options); 

    var element = this;

    var steps = $(element).find("fieldset");
    var count = steps.size();
    var submmitButtonName = "#" + options.submitButton;
    $(submmitButtonName).hide();

    // 2
    $(element).before("");

    steps.each(function(i) {
        $(this).wrap("");
        $(this).append("");

        // 2
        var name = $(this).find("legend").html();
        $("#steps").append("Step " + (i + 1) + "" + name + "");

        if (i == 0) {
            createNextButton(i);
            selectStep(i);
        }
        else if (i == count - 1) {
            $("#step" + i).hide();
            createPrevButton(i);
        }
        else {
            $("#step" + i).hide();
            createPrevButton(i);
            createNextButton(i);
        }
    });

    function createPrevButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("Back ");

        $("#" + stepName + "Prev").bind("click", function(e) {
            $("#" + stepName).hide();

            if($(this).attr('id') == "step4Prev" && $('li#stepDesc3 del').legnth > 0){
                i--;
            }
            $("#step" + (i - 1)).show();
            $(submmitButtonName).hide();
            selectStep(i - 1);
        });
    }

    function createNextButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("Next");

        $("#" + stepName + "Next").bind("click", function(e) {
            var div = $('div#'+ stepName);
            $(div).find('.field_help').remove();
            if( $(div).find('input:text[value=""]').length > 0 ||
                $(div).find('input:checkbox:not(:checked)').length > 0 ||
                $(div).find('select option:first-child:selected').length > 0 ||
                $(div).find('textarea').val() == ""
                ){
                    $(div).prepend(' Please complete all fields before moving to next step');
                    return false;
                }
            if($(this).attr('id') == "step2Next" ){
                if($(div).find('select[name="type"]').val() == "land"){
                    i++;
                    $('li#stepDesc3').html(''+$('li#stepDesc3').html()+'');
                }else{
                    if($('li#stepDesc3 del').legnth > 0){
                        $('li#stepDesc3').html($('li#stepDesc3 del').html());
                    }
                }
            }

            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        });
    }

    function selectStep(i) {
        $("#steps li").removeClass("current");
        $("#stepDesc" + i).addClass("current");
    }

}
})(jQuery);

And this is the form area for the checkboxes:


                
                    
                        Heating
                        Air Conditioning
                        Master En-suite
                        Built in Robes
                        New Kitchen
                        Rumpus / Family Room
                        Inside spa
                        Media Room
                      
                
                
                
                
                    
                        Ceiling Fans
                        High Ceilings
                        Insulated
                        3 Phase Power
                        Broadband / Internet
                        Polished Floors
                        Granny Flat

The issue is that at present the javascript will only validate if the user ticks every single checkbox.

Perhaps it's obvious perhaps it isn't, but I cannot figure it out.

ADDED:

with checkbox ticked this is the html.

if we untick this is the html.

Dave Newton · Accepted Answer

$(div).find('input:checkbox:not(:checked)').length > 0

This line says "if I have any checkboxes not checked", so the behavior you're seeing is what I'd expect. Don't you want to count the number of checked boxes and make sure it's > 0?

Validate multiple checkboxes, minimum one required

Answers (2)

Related Questions