如何在复选框中验证多个名称的复选框(BOOTSTRAP VALIDATOR USED)

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

本文关键字:复选框 BOOTSTRAP VALIDATOR USED 验证      更新时间:2023-09-26

嗨,这里是html代码,你可以看到它在输入中有不同的名称,我想验证这个bootstrap js,这样至少一个复选框必须在表单提交之前被选中。下面将是我使用的javascript单选按钮,因为他们有相同的名称。谢谢你!'

<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'
                    }
                }
            }
        }
    })
$(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'
                    }
                }
            }
        }
    });
});