Brad Sapkota
Brad Sapkota

Reputation: 11

how to validate checkbox with multiple names in checkbox (BOOTSTRAP VALIDATOR USED)

Hi there here is the html code, as you can see it has different names in the input, i wanted to validate this bootstrap js so that atleast one checkbox has to be selected before the form submission. Below will be the javascript I have used for radio buttons since they have same name. Thank you `

<div class="form-group required">
                    <label class="col-md-2 control-label" required>Q2. Which event did you attend?</label>
                    <div class="col-md-4">
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Mel" value="true" />Melbourne</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Syd" value="true" />Sydney</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Bri" value="true" />Brisbane</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Gol" value="true" />Gold Coast</label>
                        </div>
                    </div>
                </div>`
$(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        fields: {

            comment: {
                validators: {
                    stringLength: {
                        min: 5,
                        max: 200,
                        message: 'Please enter at least 5 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply your description'
                    }
                }
            },
            RateLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            LikelyLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            EventLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            AdditionalFeed: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your feedback'
                    }
                }
            },
            ProductTrial: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            }
        }
    })

Upvotes: 1

Views: 1188

Answers (1)

Al Gallardo
Al Gallardo

Reputation: 71

$(document).ready(function() {
$('#contact_form')
    .on('init.field.fv', function(e, data) {
        // data.field   --> The field name
        // data.element --> The field element
        if (data.field === 'checkEvents') {
            var $parent = data.element.parents('.form-group'),
                $icon   = data.element.data('fv.icon');
            $icon.appendTo('#feedbackIcon');  // <--- Move the icon to this element
        }
    })
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            validateCheck: {
                selector: '.validateCheck',
                err: '#message',      // <---- All messages of checkEvents will be placed inside this element
                validators: {
                    notEmpty: {
                        message: 'Please choose at least one checkbox'
                    }
                }
            }
        }
    });
});

Upvotes: 2

Related Questions