How can I display checkbox validation messages at the same time using jquery

I have a problem displaying validation messages at the same time. In fact only one is showing write no开发者_如何学Cw:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Type</p>');
                    $('#searchValidationError').show();
                }
                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Status</p>');
                    $('#searchValidationError').show();
                }
            });

The else statement in the first condition is overriding the else statement in the second condition what is the best way to resolve this?

Instead of overwriting the $('#searchValidationError') with new html, you could append it, like this:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                $('#searchValidationError').html('');
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                    $('#searchValidationError').append('<p>Please select Claim Type</p>');
                    $('#searchValidationError').show();
                }
                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    $('#searchValidationError').append('<p>Please select Claim Status</p>');
                    $('#searchValidationError').show();
                }
            });

Or if you want to take it a notch higher, you could make an array where you push the errors:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                var errors = [];
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    errors.push("Please select Claim Type");

                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                }


                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                }else{
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    errors.push("Please select Claim Status");
                }
                $('#searchValidationError').html('');
                if (errors.length>0){
                    $.each(errors,function(i,e){
                        $('#searchValidationError').append('<p>'+e+'</p>');
                    });

                    $('#searchValidationError').show();
                }else{
                    $('#searchValidationError').hide();
                }
            });

you should use different divs for each error to show (with different IDs), this way they won't conflict each other.

instead of using

 var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
 if (checkboxes_claimType.length) {

you can simply check from prop() introduced in jQuery v1.6

like

$(elem).prop("checked") // returns boolean value